CSS tooltips – No JavaScript or jQuery

Create tooltips based on pure CSS

The hint.css is a library for creating the tooltips on your web pages. No JavaScript or jQuery is required rather it uses HTML5 data attributes. The CSS3 transitions are also used for creating effects.

You may customize the tooltips like changing the colors, height, width, etc. by using the built-in classes. Various directions can also be set by using the specified classes while tooltip content is given by using the aria-label attribute.

Developer’s page Download library

How to include this library in your website?

You may install the library by npm or Bower.

npm: npm install –save hint.css

Bower: bower install hint.css

Or download the zipped file by above link and find the hint.css or hint.min.css file. Include the reference in the <head> section of the webpage as per your directory structure:

<link rel=”stylesheet” href=”css/toolip-hint/hint.css”>

Create the markup of the elements where you want to place the tooltips and use data attributes as shown in the demos and code below.

A demo of displaying CSS tooltips in different directions

In this example, the tooltips based on pure CSS are displayed in all available directions. The following directions can be set by using the respective CSS class:

  • top-left (hint–top-left)
  • top-right (hint—top)
  • top (hint–top-right)
  • left (hint–left)
  • right (hint–right)
  • bottom-left (hint–bottom-left)
  • bottom (hint–bottom)
  • bottom-right (hint–bottom-right)

So, for a particular direction, use the “hint–“ prefix and the direction.

In the demo, you can see text with the directions. Bring the mouse over any cell and you will see tooltip appearing in that direction:

css tooltips

Online demo and code

The markup used for this example:

<div class="content">

  <div class="position-grid">

    <div class="tooltip-demo-grid__cell"><a href="#" aria-label="bottom-right" class="hint--bottom-right">bottom-right direction</a></div>

   <div class="tooltip-demo-grid__cell"><a href="#" aria-label="bottom" class="hint--bottom">bottom direction</a></div>

     <div class="tooltip-demo-grid__cell"><a href="#" aria-label="bottom-left" class="hint--bottom-left">bottom-left direction</a></div>

   <div class="tooltip-demo-grid__cell"><a href="#" aria-label="right" class="hint--right">right direction</a></div>

    <div class="tooltip-demo-grid__cell"><a>.</a></div>

     <div class="tooltip-demo-grid__cell"><a href="#" aria-label="left" class="hint--left">left direction</a></div>

   <div class="tooltip-demo-grid__cell"><a href="#" aria-label="top-right" class="hint--top-right">top-right direction</a></div>

     <div class="tooltip-demo-grid__cell"><a href="#" aria-label="top" class="hint--top">top direction</a></div>

    <div class="tooltip-demo-grid__cell"><a href="#" aria-label="top-left" class="hint--top-left">top-left direction</a></div>

 </div>



</div>

A demo of displaying tooltips in a title bar

In this example, the tooltips are displayed towards the bottom right of the tiny icons in a title bar. Hover the mouse over any icon and see the tooltips appearing:

css tooltips title

See online demo and code

Creating various color tooltips

You may specify the colors of the tooltips as well by using the color specific classes:

  • hint–error (For red color)
  • hint–warning
  • hint–info (For light blue color)
  • hint–success (Green color)

See this example online with code:

css tooltips colors

See online demo and code

You may specify the color where direction class is given. For example:

<p>

 <a class="status-icon  hint--bottom-right  hint--error" style="background:indianred" aria-label="Red for error">

    Red color

 </a>

 <a class="status-icon  hint--bottom-right  hint--warning" style="background:orange" aria-label="Orange for warning">

    Orange for warning   

  </a>

  <a class="status-icon  hint--bottom-left  hint--info" style="background:lightblue" aria-label="blue for ingo">

    Light blue for info

  </a>

  <a class="status-icon  hint--bottom-right  hint--success" style="background:#00EC00" aria-label="Green color for success">Green for success

  </a>

</p>

 

Various sized tooltips demo

By using the size related classes of the tooltip CSS library, you may create various sized tooltips. The classes are:

  • hint–small
  • hint–medium
  • hint–large

Have a look at this demo where all these classes are used:

css tooltips size

See online demo and code

The markup:

<h3>Size variations</h3>
<p>

  <a class="hint--top  hint--small" style="border: 1px dashed #A4A4A4;padding:3px 6px;;color:#000;" data-hint="Specify the hint--small class for small sized tooltip.">

  Small

  </a>



   <a class="hint--top  hint--medium" style="border: 1px dashed #A4A4A4;padding:3px 6px;4px;color:#000;" data-hint="Specify the hint--medium class for medium sized tooltip.">

  Medium

  </a>



  <a class="hint--top  hint--large" style="border: 1px dashed #A4A4A4;padding:5px 20px;color:#000;" data-hint="Specify the hint--large class for large sized tooltip.">

   Large

  </a>

</p>

 

See the complete code on the demo page.

Adding effects in the tooltip

You may animate the tooltips by using the hint–bounce class. If no animation is desired then use the hint–no-animate class. The demo also shows a tooltip that is always displayed by using the hint–always class. Have a look:

css tooltips animation

See online demo and code

See the complete code from the demo page.

To learn more about this awesome tooltip library, visit the developer’s page.