Snippets Collections
[su_tooltip title="Tooltip title" text="Tooltip content" position="top" background="#222222" color="#FFFFFF" font_size="16" text_align="left" max_width="300" radius="5" shadow="no" behavior="hover" class="" outline="yes" tabindex="yes" reference_tag="span" hide_delay="0"] Hover me to open tooltip [/su_tooltip]
/* ----------------------------------------
Note: any modifications to these styles will be global 
---------------------------------------- */
.tippy-box {}
.tippy-content {}
.tippy-arrow {}

/* ----------------------------------------
You can also apply tooltip css overrides on the INTERIOR of your tooltips. Note: results may sometimes be unpredictable 😡
---------------------------------------- */
.tippy-box .style1 {
  font-family: courier;
  color: #0066FF;
  padding: 15px;
  display: inline-block;
}
<!-- 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>
star

Sat Jan 08 2022 08:24:04 GMT+0000 (UTC) https://getshortcodes.com/docs/tooltip/

#tooltip #snippet #wp
star

Fri Dec 17 2021 08:12:32 GMT+0000 (UTC) https://www.ben-willenbring.com/willenblog/adding-tooltips-on-squarespace-with-popperjs

#tooltip #info #header #java
star

Fri Dec 17 2021 08:12:01 GMT+0000 (UTC) https://www.ben-willenbring.com/willenblog/adding-tooltips-on-squarespace-with-popperjs

#tooltip #info #header #java
star

Fri May 28 2021 16:52:06 GMT+0000 (UTC) https://bbbootstrap.com/snippets/card-hover-effect-clip-apth-property-57463451

#bootstrap #hover #tooltip

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension