I decided to make this a git project. Still a work in progress, although, unlike previous examples, this tooltip has an arrow and allows for different position placements. You can check out the project here or the full demo here.
It uses HTML5 Data attribute to populate the CSS “content” property. So if you have mark up like this;
<div data-somecontent="this is my conten"> hi there. </div>
Then use a CSS selector
div {
content: …
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: …
I stumbled across a really cool project by JavaScript Remy Sharp. The MIT License project is a public, open source permanent resource for the community.
It allows you to create a single resource that would always be up to date and would always have your MIT details online.
I created my own, which is very simple to do. And as a thank you to Remy I decided to design a couple of templates which you can see here, here and here 🙂