CSS Tooltips is a small (~1.7kb) and simple CSS / SASS library to create CSS3 tooltips without any Javascript included.
Demo: http://sanzaru.github.io/csstooltips/#demo
- Internet Explorer 9+
- Firefox 36+
- Chrome 41+
- cssttp (required):
- The class to setup the tooltip.
- fade-in (optional):
- If set the tooltip will fade in.
- right (optional):
- If set the tooltip will be shown on the right side.
- left (optional):
- If set the tooltip will be shown on the left side.
- top (optional):
- If set the tooltip will be shown above.
<span class="cssttp fade-in example">
<span>Simple tooltip example</span>
<div class="cssttp-content">
<i class="fa fa-info-circle"></i> Hello, I'm a tooltip!
</div>
</span>
<span class="cssttp fade-in left example" style="margin-left: 250px;">
<span>Simple tooltip example</span>
<div class="cssttp-content">
<i class="fa fa-info-circle"></i> Hello, I'm a tooltip!
</div>
</span>
<span class="cssttp fade-in right example">
<span>Simple tooltip example</span>
<div class="cssttp-content">
<i class="fa fa-info-circle"></i> Hello, I'm a tooltip!
</div>
</span>
<span class="cssttp fade-in top example">
<span>Simple tooltip example</span>
<div class="cssttp-content">
<i class="fa fa-info-circle"></i> Hello, I'm a tooltip!
</div>
</span>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et <span class="cssttp help
textinfo">accusam<span class="cssttp-content">Help 01</span></span> et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
<span class="cssttp help textinfo">aliquyam<span class="cssttp-content">Help 02</span></span> erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
<span class="cssttp help textinfo">sadipscing<span class="cssttp-content">Help 03</span></span> elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>