How to Customize the In-Browser Tool Tip Bubble

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>

Inspect hovered element in Chrome?

I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move the focus over to the dev tools. The html for the tooltip should show up next to the element its a tooltip for in the HTML. Then you can look at it as if it were another element. If you go back to Chrome the HTML disappears so just something to be aware of.

Kind of a weird way but it worked for me so I figured I would share it.

Tooltips for mobile browsers

You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.

Javascript (done with jQuery):

$("span[title]").click(function () {
  var $title = $(this).find(".title");
  if (!$title.length) {
    $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
  } else {
    $title.remove();
  }
});

CSS:

.more_info {
  border-bottom: 1px dotted;
  position: relative;
}

.more_info .title {
  position: absolute;
  top: 20px;
  background: silver;
  padding: 4px;
  left: 0;
  white-space: nowrap;
}

Demo: http://jsfiddle.net/xaAN3/

Is it possible to customize the title popup in a tag?

In css3 you style your tooltip using :after & adding a class to the element.

css3

.tooltip:hover:after {
 background:rgba(0,0,0,0.7);
 color:#fff;
 content:attr(rel);
 display:block;
 margin-top:-42px;
 position:absolute;
 white-space:nowrap;
}

html

<a href="#" rel="This link leads you to Page1" class="tooltip">Page1</a>

http://jsfiddle.net/eRQLQ/

And this is with time & delay

.tooltip:after{
 background:rgba(0,0,0,0.7);
 color:#fff;
 content:attr(rel);
 display:block;
 margin-top:-42px;
 position:absolute;
 white-space:nowrap;
 opacity:0;
 -webkit-transition:opacity 1s ease 2s;
}
.tooltip:hover:after{
 opacity:1;
 -webkit-transition:opacity 1s ease 300ms;
}

if you want more support add also the -moz,-ms and other prefixes.

300ms delay on open/close, duration 1s

http://jsfiddle.net/eRQLQ/1/

2s delay on close, duration 1s

http://jsfiddle.net/eRQLQ/2/

EDIT

complex

http://jsfiddle.net/eRQLQ/3/

EDIT 2

multiple elements inside a container with images arrtibute values and custom text.less html.

http://jsfiddle.net/eRQLQ/8/

Add line break within tooltips

Just use the entity code for a linebreak in a title attribute.