applying style to title attribute based on a class

Question

I am trying to apply style for title attribute of a span tab. The span is already using a style class i want to use the same class to apply my style is it possible ?

<span class="span_class" title="100"> hello </span>

.span_class {

}

I want to change the background colour of the title.

i already saw that. This is not a duplicate of that. I want to write the style in the same style class span_class . — Venkatesswara Rao Devarapalem, Oct 21 '16 at 08:06
That's not possible. You have to set an extra element or do with :after or before — priya_singh, Oct 21 '16 at 08:10
Attributes are not to be rendered so you cannot style them. You're probably thinking of the browser tooltip widget and you don't have more control about it than other widgets like download manager or file choosers. — Álvaro González, Oct 21 '16 at 08:21

score 0 · Answer 1 · edited May 23 '17 at 12:16

the question is answered here: How to change the style of Title attribute inside the anchor tag?

alternatively, you should use a javascript library (there are several of them) like https://jqueryui.com/tooltip/

I think you should also add the aria-label attribute to ensure accessibility.

Can you use scss to have the same style? Something like that?

@mixin myclassforspan{
  background:blue;
  color:white;
  padding:10px 2px;
}

.span_class[title] {
  @include  myclassforspan;
  &:hover{
    position: relative; 
    &:after{
      @include  myclassforspan;
      content: attr(title);  
      position: absolute;
      left: 0;
      top: 100%;
      z-index: 20; 
    }    
  }
}

This works i guess. thanks – Venkatesswara Rao Devarapalem Oct 21 '16 at 08:28 — Venkatesswara Rao Devarapalem, Oct 21 '16 at 08:28

applying style to title attribute based on a class

1 Answers1