Simple HTML Tooltip Library – html-hint

Preview:

Description:

html-hint is a pure CSS tooltip library used to display any html content in an animated tooltip. Built with SASS and heavily based on hint.css.

How to use it:

Download and include the html-hint.css in the head section of the webpage.

<link href="dist/html-hint.css" rel="stylesheet">

Create an html tooltip with an image embedded.

I'm a
<span class="hint hint--html hint--right" style="color: #0099FF">
  hint right
  <div style="pointer-events: none;" class="hint__content">
    <div style="width: 140px; margin: 5px">
      I'm a <strong>hint html content</strong>
    </div>
    <div>
      <img src="https://unsplash.it/120/120?image=755">
    </div>
  </div>
</span>

All the position classes:

• hint–top
• hint–bottom
• hint–left
• hint–right

Available modifiers:

• hint–error
• hint–info
• hint–warning
• hint–success
• hint–rounded
• hint–bounce