tooltip.js

The simplest HTML tooltip for your web sites


play_arrow try it! download



call_split

Independent

Unlike the others, tooltip.js does not depend on any other library. Thanks to that, it's really small (2.4 KB of javascript and 1.5 KB of css).

settings

Easy to Use

Using it is easy, because it does not require any configuration options. All you need is to add reference for the library to your website.

public

Compatible

Plays well with Firefox, Chrome, Opera, Edge, Safari and even with Internet Explorer.



How to use it

tooltip.js can be added to your website in two simple steps:

  1. Include tooltip.js and tooltip.css (or the minified versions for the production) in your page. 
    <link href="/path/to/styles/tooltip.min.css" rel="stylesheet" />
<script src="/path/to/tooltip.min.js"></script>
  2. Use the title attribute of an HTML element and mark it with .tooltip css class. tooltip.js itself does not require any configuration options, but you can customize the tooltip position and style with css classes. Find out more in the How it works section.


How it works

wrap_text

It's simple

Generally, it uses the title attribute of the HTML element. The element must be marked with .tooltip css class.

extension

It's customizable

To be simple, tooltip.js does not calculate it's position, it leaves this option to the users. The position and style can be changed by using predefined css classes.



Examples

chat_bubble Hello world

This is a very basic usage of the tooltip.js library, showing how to apply tooltip for an element and specify its position.

play_arrow try it! code source
explore Working with HTML

Sometimes the simple text is not enough. In this example you can se how to use an child element as tooltip source.

play_arrow try it! code source
style Custom styles

With simplicity in mind, in order to change the visual appearance, all you need is to add your own css rules.

play_arrow try it! code source


Documentation

.tooltip

Applied to an HTML element it will transform the title attribute to a tooltip, with the position set to the top.

Example
<button class="tooltip">
    top
</button>
.tooltip--left

Using modifiers you can change the tooltip position.

Example
  • tooltip--top Tooltip will appear to the top.
  • tooltip--right Tooltip will appear to the right.
  • tooltip--bottom Tooltip will appear to the bottom.
  • tooltip--left Tooltip will appear to the left.
Example
<button class="tooltip tooltip--right">
    top
</button>
.tooltip__text

To use an HTML content for the tooltip text you can use the element selector within the target element.

Example
<button class="tooltip">
    top
    <span class="tooltip__text">An <b>HTML</b> content</span>
</button>