Tippy.js tooltips v.6
I am starting to implement version 6 of the tippy.js tooltips into my codes, and initially, I found it a little confusing to construct as opposed to version 5.
So here is a mini tutorial for those who might need it.
Generally, a tooltip is constructed by adding the title attribute to links (or other elements). You would do so the following way:
<a href="/tagged/green" title="tagged as green">green</a>
This makes tagged as green the text of the tooltip.
Now, within the code of your theme/page, add the following lines somewhere before <style> and after <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/svg-arrow.css"/>
The first line is needed to make scripts work, and the other calls the css for the rounded tooltip arrow (if you don’t want a round customizable arrow, you can delete this line).
Add the following lines before </body>:
<!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> <script> tippy('a[title]', { theme: 'tomato', zIndex: 9999999999, arrow: tippy.roundArrow, placement: 'auto', content(reference) { const title = reference.getAttribute('title'); reference.removeAttribute('title'); return title; }, }); </script>
After a[title], you can add more elements, i.e. button[title], but make sure to separate them with a comma.
The theme allows you to manipulate the tooltip using CSS – if you prefer to use the default, just delete that line.
If you don’t want the round arrow, change the tippy.roundArrow to e.g. true (pointy arrow) or false (no arrow). The documentation lists some more options.
If you want to manipulate the tooltip’s design, add these lines somewhere between <style></style>:
.tippy-box[data-theme~='tomato'] { background-color: tomato; color: yellow; } .tippy-box[data-theme~='tomato'] > .tippy-svg-arrow { fill: tomato; }
You can now freely manipulate the tooltip, changing its color, font, and more.
Congratulations, you have now created and implemented version 6 of the tippy.js tooltips.