Elegant Tooltip Library With Pure CSS – eleganttips.css

Preview:

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