jQuery UI Tooltip

jQuery UI's tooltip() widget upgrades a plain browser title tooltip into a styled, positionable popup. Attach it to any element that already has a title attribute, or feed it custom HTML content, and control exactly where and how it appears.

Quick Reference

Option / Event Description Example
.tooltip()Converts an element's title attribute into a styled tooltip.$('[title]').tooltip();
contentSupplies custom HTML content instead of the plain title text.content: function(){ return '<b>Hi</b>'; }
positionControls where the tooltip appears relative to the element.position: { my: 'left+15 center', at: 'right center' }
show / hideFire when the tooltip opens/closes; can animate.show: { effect: 'fadeIn', duration: 200 }
Tip: Keep the native title attribute on your markup as a fallback for screen readers and non-JS environments — tooltip() reads it, it doesn't remove its accessibility value.

1) Basic Tooltip (from title)


// <button title="Saves your changes">Save</button>
$('[title]').tooltip();
Try it Yourself »

2) content Option (Custom HTML)


$('#info').tooltip({
  content: function(){
    return '<strong>Note:</strong> Free shipping over $50';
  }
});
Try it Yourself »

3) position Option


$('#info').tooltip({
  position: { my: 'left+15 center', at: 'right center' }
});
Try it Yourself »

4) show / hide Events


$('#info').tooltip({
  show: { effect: 'fadeIn', duration: 200 },
  hide: { effect: 'fadeOut', duration: 150 }
});
Try it Yourself »

Live Demo

Hover the icon below to see a real, styled jQuery UI tooltip with custom content.

 Hover the icon

Tooltip not shown yet.
Note: Tooltip only reacts to hover/focus by default. For touch devices, consider also binding a click handler so the info is reachable without a mouse.