Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 

README.md

#DT-SimpleCSSToolTip ##A really simple Tooltip made purely in CSS

This little project shows you how create a tooltip in CSS. Currently its work in progress so there may be some buggyness :)

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: attr(data-somecontent);
	display: block;
}

This adds the data into the div container. With some more CSS magic we can turn it into a tooltip like this:

Demo: http://cdpn.io/oCqIu

##Contact

##License Llicensed under CC BY 3.0: http://creativecommons.org/licenses/by/3.0/ A mention of 'DT-phpAccordian' in human-readable source code is considered acceptable attribution (most common on theweb). If human readable source code is not available to the end user, a mention in an 'About' or 'Credits' screen is considered acceptable (most common in desktop or mobile software) but not required.

About

Simple CSS tooltip using HTML 5 Data attribute

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.