Elegant Tooltip Library With Pure CSS – eleganttips.css

Category: CSS & CSS3 , tooltip | October 19, 2018
Author: gw19
Views Total: 1,405
Official Page: Go to website
Last Update: October 19, 2018
License: MIT

Preview:

Elegant Tooltip Library With Pure CSS – eleganttips.css

Description:

The eleganttips.css makes it easy to create animated, fully configurable tooltip popups on any DOM element.

Features:

  • 8 positions.
  • 3 built-in themes.
  • With or without arrow indicators.
  • CSS3 based smooth animations.

Basic usage:

Just include the style sheet ‘eleganttips.css’ on the page and done.

<link rel="stylesheet" href="eleganttips.min.css">

Add the CSS class ‘et’ to target elements and wrap the tooltip content into an inline element with a position class of your choice:

  • et-bottom
  • et-top
  • et-left
  • et-right
  • et-left-bottom
  • et-left-top
  • et-right-bottom
  • et-right-top
<button class='et'>Hover me
  <span class='et-top'>
    Tooltip here!
  </span>
</button>

Add an arrow to the tooltip.

<button class='et'>Hover me
  <span class='et-top et-arrow'>
    Tooltip here
  </span>
</button>

Change the default tooltip theme.

<button class='et'>Hover me
  <span class='et-top et-arrow et-style-night'>
    Night Theme
  </span>
</button>

<button class='et'>Hover me
  <span class='et-top et-arrow et-style-warn'>
    Warning Theme
  </span>
</button>

Set the width of the tooltip.

<button class='et'>Hover me
  <span class='et-top et-arrow et-narrow'>
    Narrow Tooltip
  </span>
</button>

<button class='et'>Hover me
  <span class='et-top et-arrow et-wide'>
    Wide Tooltip
  </span>
</button>

Changelog:

10/19/2018

  • Update background-color in css file

You Might Be Interested In:


One thought on “Elegant Tooltip Library With Pure CSS – eleganttips.css

Leave a Reply