How to Create a Tooltip

Add a tooltip to a div

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

How to create a tooltip?

The CSS Solution

There is a very simple solution to the problem at hand. What I essentially added is the following CSS code

word-wrap:break-word;

to the class that surrounds your tooltip text.

Here is a working demo

Also, this is a good read

What if I am using Angular UI?

For styling a tooltip from angular ui, I added tooltip-class="tooltip" to the tooltip code.

Here is a working demo with angular

This is a modified plunkr obtained from the Angular UI documentation

How can I create custom tooltips with css pseudoelements

JSFiddle is here. Note: The original content is here.

.tooltip {  display: inline;  position: relative;}
.tooltip:hover {  color: #c00;  text-decoration: none;}
.tooltip:hover:after {  background: #111;  background: rgba(0, 0, 0, .8);  border-radius: .5em;  bottom: 1.35em;  color: #fff;  content: attr(title);  display: block;  left: 1em;  padding: .3em 1em;  position: absolute;  text-shadow: 0 1px 0 #000;  white-space: nowrap;  z-index: 98;}
.tooltip:hover:before {  border: solid;  border-color: #111 transparent;  border-color: rgba(0, 0, 0, .8) transparent;  border-width: .4em .4em 0 .4em;  bottom: 1em;  content: "";  display: block;  left: 2em;  position: absolute;  z-index: 99;}

<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>

How to make a rich tooltip with a HTML form in it

Check this snippet

Updated

$("a").bind("mousemove", function(event) {    $("div.tooltip").css({        top: event.pageY + 10 + "px",        left: event.pageX + 10 + "px"    }).show();})$('.close').bind('click', function(){  $("div.tooltip").fadeOut();});

body{    font-family:arial;    font-size:12px;}.tooltip {    width:350px;    position:absolute;    display:none;    z-index:1000;    background-color:#CB5757;    color:white;    border: 1px solid #AB4141;    padding:15px 20px;    box-shadow: 0px 3px 2px #8D8D8D;    border-radius: 6px;}.close{  right: 15px;  position: absolute;  background: #fff;  color: #555;  width: 20px;  height: 20px;  text-align: center;  line-height: 20px;  border-radius: 50%;  font-size: 10px;  cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="main"><p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus      tristique senectus et netus et malesuada pellentesque habitant senectus     fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies      eget,  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.      Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><div class="tooltip">    <span class="close">X</span>    <h3>Tooltip title</h3>    <p>Vestibulum tortor quam, feugiat vitae, ultricies          eget,  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.          Aenean ultricies mi vitae est. Mauris placerat eleifend leo.    </p>    <form>        <input type="email" placeholder="john@doe.com" />        <input type="submit" value="subscribe" />    </form>    <span class="branding">This is our branding message</span></div>

What is the easiest way to create an HTML mouseover tool tip?

The easiest way is to use the native HTML title attribute:

<img src="https://stackoverflow.com/favicon.ico"     style="cursor:pointer;"     title="Stack Overflow">

How to create tooltip with vue.js?

You can just use plain html and css: Check out this link:
w3schools css tooltip

and conditionally show by using v-if as shown examples in the Vue docs
v-if Vue Docs

How to make the tooltip to show immediately for some elements in JavaScript or CSS

Try this code:

            .showTooltip {          background-color: yellow;          padding:8px;          top: 20px;          left: 20px;          position: absolute;          margin: 0 auto;          border: 2px solid lightgrey;          cursor: pointer;          font-family: system, sans-serif;        }            .showTooltip:hover::after {          position: absolute;          content: attr(data-tooltip);          bottom: -2.5em;          right: -1em;          background-color: #333;          color: white;          padding: .25em .5em;          font-size: .8em;        }

    <div class="showTooltip" data-tooltip="I am a tooltip">    Hover over me and a tool tip appears after a few seconds    </div>

How to create a tooltip on the nodes of a treeview in vb.net?

Treeviews don't require a ToolTip control to have tips.

In the treeview control

    TreeView1.ShowNodeToolTips = True

then in the nodes of the treeview set the

    .ToolTipText

to what you want to display.

How to create a tooltip with an awesome font?

Check if you didn't forget about some libraries. The following code is working properly.

$(document).ready(function(){    $('[data-toggle="tooltip"]').tooltip();   });

<!-- Bootstrap --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!-- Font Awesome --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"><!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- BootstrapJS --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><i class="fas fa-info-circle fa-2x" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></i>