Author: | arshdkhn |
---|---|
Views Total: | 8,065 views |
Official Page: | Go to website |
Last Update: | December 10, 2016 |
License: | MIT |
Preview:

Description:
A minimal, responsive, CSS styled tooltip that auto re-positions it self if there’s no enough space on the right or left side of the viewport.
How to use it:
Add the rel="tooltip"
attribute to the target element and define the tooltip content using title
attribute. You can also specify the directions using CSS classes as shown below:
<span class="top" rel="tooltip" title="tooltip content">Tooltip</span> <span class="bottom" rel="tooltip" title="tooltip content">Tooltip</span> <span class="left" rel="tooltip" title="tooltip content">Tooltip</span> <span class="right" rel="tooltip" title="tooltip content">Tooltip</span>
Style the tooltips with the following CSS rules.
#tooltip { text-align: center; color: #fff; background: #333; position: absolute; z-index: 10000; padding: 10px; border-radius: 5px; -webkit-transition: 100ms ease; -moz-transition: 100ms ease; -o-transition: 100ms ease; -ms-transition: 100ms ease; transition: 100ms ease; } #tooltip:after /* triangle decoration */ { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #111; top: -20px; bottom: auto; } #tooltip.left:after { left: 10px; margin: 0; } #tooltip.right:after { right: 10px; left: auto; margin: 0; }
The main JavaScript to active the tooltips. Just include the following JS file at the bottom of the webpage and done.
<script src="js/index.js"></script>
Works only with short tooltip text.