Elegant Tooltip Library With Pure CSS – eleganttips.css

Author
In CSS Tooltip, CSS Tutorial Nov 30, 2017

The Eleganttips.css makes it simple to create animated, absolutely configurable tooltip popups on any DOM part. You can easily set the tooltip position by setting the simple position class.

Elegant Tooltip Library With Pure CSS

  • eight positions.
  • three integrated topics.
  • Without or with arrow signs.
  • CSS3 primarily based easy animations.

Elementary utilization:

Simply come with the way sheet ‘eleganttips.css’ at the web page and completed.

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

Upload the CSS elegance ‘et’ to focus on parts and wrap the tooltip content material into an inline part with a place elegance of your selection:

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

Upload an arrow to the tooltip.

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

Exchange the default tooltip theme.

<button elegance='et'>Hover me <span elegance='et-top et-arrow et-style-night'> Night time Theme </span> </button> <button elegance='et'>Hover me <span elegance='et-top et-arrow et-style-warn'> Caution Theme </span> </button>

Set the width of the tooltip.

<button elegance='et'>Hover me <span elegance='et-top et-arrow et-narrow'> Slender Tooltip </span> </button> <button elegance='et'>Hover me <span elegance='et-top et-arrow et-wide'> Vast Tooltip </span> </button>

The submit Chic Tooltip Library With Natural CSS – eleganttips.css gave the impression first on CSS Script.

 

Leave a Reply

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