A Portfolio and blog for Mustafa Kurtuldu

I have been experimenting with the CSS content property quite a bit lately. What I discovered is you can populate it with the HTML data attribute.

For example, say we wanted an item to have a tooltip. We would write out the HTML like this:

<a href="#" id="my-link" data-tooltip="this is my tooltip data">This is my link</a>

Now in the CSS all we have to do is:

#my-link {
    position: relative;
  }

  #my-link:before {
     diplay: block;
     content: "";
     position: absolute;
     bottom: -40px;
     opacity: 0.6;
     color: #fff;
   } 

  #my-link:hover:before {
    content: attr(data-tooltip);
    padding: 2px;
    border-radius: 5px;
    background: #000;
  }

Now we have a working tooltip without JavaScript. Of course, we could style it some more to make it even more tooltipy, but you get the idea. Check out the demo.