April 21, 2020
HomeJavaScript QuestionsHow to Add Tooltip in Javascript

How to Add Tooltip in Javascript

By  JavaScript Questions  0 Comments

In this tutorial, you will learn how to add tooltip in javascript. The tooltip is used to display the shortest possible details about an element in the form of a text box. The tooltip generally appears whenever a user hovers over an element using the mouse pointer.

Tooltip is extremely useful when it comes to providing basic details about the functionality of an element. You may have seen on various websites where they have a symbol of question mark (?) right next to an element and as soon as you hover over that symbol, a small text box pops up with details about the usage of that specific element.

There are various third-party javascript libraries that can help us in creating interactive as well as customizable tooltip and one of them is Tippy JS.  We are going to use this library to accomplish our goal because it is extremely easy to use.  Please check out its official page to learn more about it.

We are using v4 of Tippy JS in this tutorial. If you are using the latest version, then please do read the docs first.

In the following example, we have one button element and when we hover over it, we will display a tooltip using Tippy JS.  Please have a look over the code example and the steps given below.

HTML & CSS

  • We have 2 elements in the HTML file (div and button).
  • The div element is just a wrapper for the button element. We are using the style attribute to center align the button element horizontally.
  • The button element has “Click Here” as innerText.
  • We have added the light.css file using the link tag. This CSS file contains all styles related to the light theme.
  • We have added Popper JS v1 and Tippy JS v4 using the script tag. Popper JS is required to make Tippy JS work.
  • We are using a CDN link here for both CSS file and javascript files, but you can also download them and host locally on your server.
  • We have also included our javascript file script.js with a script tag at the bottom.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link 
    rel="stylesheet" 
    href="https://unpkg.com/tippy.js@4/themes/light.css" 
  />
    <title>Document</title>
</head>

<body>

    <div style="text-align: center">
        <button id="myBtn">Click Here</button>
    </div>
    

    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <script src="script.js"></script>
</body>

</html>

Javascript

We are calling the tippy() method of Tippy JS and passing the CSS selector of the button element and an options object as parameters. You can use this options object to completely customize the tooltip.  You can specify the content, delay, placement, etc for the tooltip in this options object.

This is all that you need to display a basic tooltip using Tippy JS.  However, there are a bunch of other options and it has a very comprehensive documentation page, so please do check it out to learn more about it.

tippy('#myBtn', {
    content: "<strong>My Tooltip</strong>",
    placement: 'left',
    arrow: true,
    arrowType: 'round',
    animation: 'perspective',
    theme: 'light',
    duration: 500,
    delay: 1000,
    followCursor: false,
  })
 
         

You May Also Like:

No related posts.