Tooltip

PHOTO EMBED

Fri Dec 17 2021 08:12:01 GMT+0000 (Coordinated Universal Time)

Saved by @jackie #tooltip #info #header #java

<!-- 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>
content_copyCOPY

This adds a hover definition to a hyperlink. With the code injection header in place, add tooltips by creating links whose href attribute is prefixed with #tooltip_. That’s it.

https://www.ben-willenbring.com/willenblog/adding-tooltips-on-squarespace-with-popperjs