Tooltips (text)

Appearance & markup

<a data-url="https://emojipedia.org/" href="#tooltip_😹 Everything after the underscore IS the tooltip!<br/>By the way, when clicked on, this tooltip will go to https://emojipedia.org.">Text tooltip with a 😺 cat emoji</a>

Text tooltip with a cat emoji

<a href="#tooltip_😹 Everything after the underscore IS the tooltip!">Text tooltip with a cat emoji</a>

Tooltips (with HTML)

Shows an animated gif

<a href="#tooltip_<img src='http://45.media.tumblr.com/tumblr_l07k7mdm9y1qzmowao1_400.gif'/>">Shows an animated gif</a>

Tooltips that link to anchor tags

Go to anchor tag

<a data-url="#anchorTag" href="#tooltip_Clicking this link will take you...">Go to anchor tag</a>

Globally styling Tooltips

I’m going to add these inline styles so that subsequent tooltips are affected.

.tippy-box .style1 {
  padding:25px;
  background-color:yellow;
}

.tippy-arrow {
  display:none;
}

Now look at the result

Tooltip after being modified by css above.

22 Carriage Returns

End of carriage returns

This item is below the named anchor.