How can I display a tooltip message on hover using jQuery?

user_142759 0
Viewed 289543

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

jquery
10 Answers

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>

user_154053520

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

user_140911990
Related