99

As the title states, how can I display a tooltip message on hover using jQuery?

Brad Larson
  • 170,088
  • 45
  • 397
  • 571
Senthil Kumar Bhaskaran
  • 7,371
  • 9
  • 43
  • 56
  • 1
    Unless it is a dynamically generated element or a tooltip whose contents might change, I would suggest using the `title="My tooltip` attribute with the element itself – Sudipta Chatterjee Mar 24 '13 at 02:37
  • please refer i have tested it work flawless : http://stackoverflow.com/questions/11781665/how-to-show-a-simple-textbox-when-i-hover-over-an-icon-using-jquery – Develop4Life Jun 06 '13 at 13:43

9 Answers9

208

Tooltip plugin might be too heavyweight for what you need. Simply set the 'title' attribute with the text you desire to show in your tooltip.

$("#yourElement").attr('title', 'This is the hover-over text');
psychotik
  • 38,153
  • 34
  • 100
  • 135
24

Following will work like a charm (assuming you have div/span/table/tr/td/etc with "id"="myId")

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

As a complimentary, .css('cursor','pointer') will change the mouse pointer on hover.

being_ethereal
  • 795
  • 7
  • 26
11

take a look at the jQuery Tooltip plugin. You can pass in an options object for different options.

There are also other alternative tooltip plugins available, of which a few are

Take look at the demos and documentation and please update your question if you have specific questions about how to use them in your code.

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
8

You can use bootstrap tooltip. Do not forget to initialize it.

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

Will be shown text Explanation on the left side.

and run it with js:

$('.tooltip-r').tooltip();
Black
  • 9,541
  • 3
  • 54
  • 54
4

As recommended qTip and other projects are quite old I recommend using qTip2 as it is most up-to-date.

berni
  • 1,955
  • 1
  • 19
  • 16
3

As mentioned in most of the answers the uses of plugins would be heavy compared with the requirements here. which is why here's another solution to get the required output just with simple HTML, CSS & JQuery code.

using CSS will give us a better view, check the code below

$(".tool-tip").attr('title-new', 'another example to display the hover-over texts');
button {
    background: aqua;
    padding:10px;
  } 
  .tool-tip[title-new]:hover:after {
      content: attr(title-new);
      position: absolute;
      border: #c0c0c0 1px dotted;
      padding: 10px;
      display: block;
      z-index: 100;
      background-color: #000000;
      color: #ffffff;
      max-width: 200px;
      text-decoration: none;
      text-align:center;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hover on the button below to check the results</p>
<button class="tool-tip">Here I am</button>
Anil Parshi
  • 875
  • 5
  • 21
2

Take a look at ToolTipster

  • easy to use
  • flexible
  • pretty lightweight, compared to some other tooltip plugins (39kB)
  • looks better, without additional styling
  • has a good set of predefined themes
thexpand
  • 641
  • 13
  • 28
pixparker
  • 2,903
  • 26
  • 23
1

For Latest/Up to date solution you may try Tippy.js it's the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.

Tippy.js

Hamza Ali
  • 96
  • 2
  • 4
0

You can do it using just css without using any jQiuery.

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>
Nalan Madheswaran
  • 10,136
  • 1
  • 57
  • 42