<!-- jQuery --> <script src="//code.jquery.com/jquery-latest.js"></script> <!-- Popper --> <script src="https://unpkg.com/@popperjs/core@2"></script> <!-- Tippy --> <script src="https://unpkg.com/tippy.js@6"></script> <script language="javascript"> // This code will execute as soon as the document is loaded $(document).ready(function() { // Allow or disallow html in tooltips (default = false) tippy.setDefaultProps({allowHTML: true}); // Transform elements let tooltip_elements = $('a[href^="#tooltip_"]'); tooltip_elements.each(function(i){ let link = $(this).attr('href'); let tip = link.replace('#tooltip_', ''); $(this).attr('data-tippy-content', tip); if (link.startsWith('#tooltip_')) { $(this).removeAttr('href').css('cursor', 'pointer'); } }); // Finally, call `tippy` tippy('[data-tippy-content]'); });</script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter