We wanted a super simple, zero config options, declarative tooltip library with no dependencies. We couldn't find one, so we wrote our own.
Just use bower to install.
$ bower install kawo-tooltipThe tooltip self-initializes so all you need to do is import it.
import '../bower_components/kawo-tooltip/dist/kawo-tooltip.min';<script src="./bower-components/kawo-tooltip/dist/kawo-tooltip.min.js"></script>Simply add the attribute data-tooltip to any element on which you wish to display a tooltip.
<p data-tooltip="Text to display">This tooltip works on almost any HTML element.</p>The data-tooltip attribute can contain HTML.
By default kawo-tooltip.js only defines essential styles. Both the tooltip and the arrow have the classes .tt and .tt-arrow applied to them so you can style them as you wish.
As a minimum we recommend the following styles:
.tt {
max-width: 200px;
padding: 5px 8px;
font-size: 14px;
color: #fff;
background-color: #333;
}
.tt-arrow {
border: 6px solid #333;
border-bottom-color: transparent;
border-right-color: transparent;
}For reference when writing your CSS styles; this is what the tooltip HTML looks like:
<div class="tt" style="[...]">
<span> ...content from data-tooltip attribute goes here... </span>
<div class="tt-arrow" style="[...]"></div>
</div>If you want to customise kawo-tooltip you can build your own minified version using uglifyjs.
$ uglifyjs kawo-tooltip.js -c -m -o dist/kawo-tooltip.min.js