Simple HTML Tooltip Library – html-hint


Author: istarkov
Views Total: 654 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
See also  Create Elegant Alerts And Notices Using Pure CSS - Alerts.css

Leave a Reply

Your email address will not be published. Required fields are marked *