Simple HTML Tooltip Library – html-hint

Category: CSS & CSS3 , Tooltip | June 25, 2015
Author:istarkov
Views Total:652 views
Official Page:Go to website
Last Update:June 25, 2015
License:MIT

Preview:

Simple HTML Tooltip Library – html-hint

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

You Might Be Interested In:


Leave a Reply