eleganttip.css   

Provide an elegant and configurable tips message block (tooltips) on your DOM element while mouse hover or focus on. (pure CSS)
Here is the example page.

Installation

Choose one of the following ways,

Including source file

<link rel='stylesheet' href='eleganttips.css'>

or

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

Including CDN

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/gw19/[email protected]/eleganttips.min.css'>

Usage

Basic usage

Adding the class  et  in the tag of element in which you want to display the tips on.
E.g. if you want to show the tips message on your <button>,

<button class='et'>Hover me!</button>

then creating a child element <span> with adding one of the following position in its class:

• et-bottom
• et-top
• et-left
• et-right
• et-left-bottom
• et-left-top
• et-right-bottom
• et-right-top

and write messages into <span>, e.g.

<button class='et'>Hover me!
  <span class='et-top'>
    Here you are!
  </span>
</button>

it will show you the message "Here you are!" on the top of the <button>.

Note that the class  et  is necessary in the parent element,
and one of the position classes like  et-top  is necessary in the child element <span>.

Other options

Now you can have other features and styles by adding more classes in your child element tag <span>.

Arrows

By default, there is no arrow. If you want an arrow, add 'et-arrow' to class in <span>.

<span class='et-top et-arrow'>Here you are!</span>

Styles

Select one of following classes to include into child element <span> if you want a different block style.

• et-style-night
• et-style-warn

<span class='et-top et-arrow et-style-night'>......</span>

<span class='et-top et-arrow et-style-warn'>......</span>

Width of tips block

Select one of following classes to include into child element <span> if you need another size of block.

• et-narrow
• et-wide

<span class='et-top et-narrow'>......</span>

<span class='et-top et-wide'>......</span>

Combination

Now you can try to include all of the features you want inside your child element!

<span class='et-left et-arrow et-style-night et-wide'>......</span>

Here is the example page.

Problems to be solved (future work)

It seems that in Firefox 56+, while using <button class='et'>...</button> as a parent element, the mouse can NOT be hovered on the tips block which immediately disappeared when mouse leave button. It means that pointer-event: auto in CSS can not be used in Firefox with <button> as a parent elements, but can be in Chrome, so I used the <span> as parent elements in the example page.

License

MIT license.