Question

I am creating a tooltip solely based on CSS. I have a span tag with a class of tooltip and used data-tooltip attribute for the content.I would like to use data-tooltip-width in that span class and use that value to set the width of the content. So basically i should create a variable like this :

var twidth = $('.tooltip').data('tooltip-width');

But i can’t find out what i should do next. I have tried this but it didn’t work:

$('.tooltip[data-tooltip]:after').css({
 'width': twidth,
});

Somebody enlighten me how can i accomplish this. Below is CSS code:

 .tooltip[data-tooltip] {
  position: relative;
  text-decoration: none;
  border-bottom: solid 1px;

 }

.tooltip[data-tooltip]:before {
 content: "";
 position: absolute;
 border-top: 20px solid @color;
 border-right: 20px solid transparent;
 visibility: hidden;
 left:50%;
 bottom: 100%;

}

.tooltip[data-tooltip]:after {
 content: attr(data-tooltip);
 position: absolute;
 color: white;
 left:50%;
 bottom:150%;
 background: @color;
 padding: 5px 15px;
 display: inline-block;   
 visibility: hidden;
 white-space: nowrap;

 }        
.tooltip[data-tooltip]:hover:before, .tooltip[data-tooltip]:hover:after {
  visibility: visible;

 } `        

Answer 1

As far as I know, you can’t add CSS-Styles to ‘after’ Elements. The problem is, that jQuery writes to the ‘style’-Attribute when you use .css, this is however an attribute to style the element itself. There is no ‘after’ element to add the style to.

Short:

• Adding a css-style in jQuery to an ‘after’-element won’t do anything.
• And (in CSS) attr() isn’t supported by any browser beyond ‘content’-attribute.