Search within TutorialsPark

Twitter Bootstrap Tooltips


To create tooltips using CSS and Javscript, no Images


Twitter Bootstrap: Tooltips

1. A tooltip is a popup that is shown when the mouse pointer hovers over the given text, the contents of the tooltip are meant to provide some detail about the text.

2. The markup used to create a tooltip is attribute data-attribute="tooltip" and the attribute title="...." to specify the text to appear on the tooltip.

3. The default position of the tooltip is at the top of the text.

Example: Twitter Bootstrap Tooltips

Give it a TRY! »

Twitter Bootstrap: Tooltip Positions

1. The position of the tooltip is set using the attribute data-placement="..." .

The values possible are top , left , right , bottom .

Example:Twitter Bootstrap Tooltip Position Using Javascript

Give it a TRY! »

Twitter Bootstrap: Tooltip Options

Table:Twitter Bootstrap Tooltips Options

Name Type Default Description
animation boolean true To apply a fade transition to tooltips using CSS
html boolean false To insert HTML elements within the tooltips
placement string|
function
'top' To set the position of the tooltip - top | bottom | left | right | auto. The value auto lets the browser reorient the tooltip dynamically
selector string false Delegate tooltip objects to specific targets
title string|
function
'' Default value of title incase the title attribute is not present
trigger string 'hover
focus'
To set the trigger mechanism of tooltip - click | hover | focus | manual. Mutiple values can be passed seperated by a space
delay number|
object
0 To insert delay before tooltip is showed or hidden.
container string | false false To append the tooltip to a specific element

1. Options can be passed using both data-attributes or Javascript.

2. When using data attributes, the append the option name to data- eg data-placement="left" .

Example:Twitter Bootstrap Tooltip Options

Give it a TRY! »

Twitter Bootstrap: Tooltips Methods

1. Tooltips can be shown and hided using javascript method $().tooltip().


Twitter Bootstrap: Tooltip Javascript Method $().tooltip(options)

1. Use this method to attach a tooltip handler to an element collection.

Example:Twitter Bootstrap $().tooltip(options)

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().tooltip('show')

1. To show or reveal an elements tooltip.

Example:Twitter Bootstrap $().tooltip('show')

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().tooltip('hide')

1. To hide an elements tooltip.

Example:Twitter Bootstrap $().tooltip('hide')

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().tooltip('toggle')

1. To toggle an elements tooltip.

Example:Twitter Bootstrap $().tooltip('toggle')

Give it a TRY! »

Twitter Bootstrap: Tooltip Javascript Method $().tooltip('destroy')

1. To hide an destroy an element tooltip.

Example:Twitter Bootstrap $().tooltip('destroy')

Give it a TRY! »

Twitter Bootstrap: Tooltip Events

Table:Twitter Bootstrap Tooltip Events

Event Type Description
show.bs.tooltip The event is fired immediately when the show instance method is invoked.
shown.bs.tooltip The event is fired when the tooltip is show to the user(CSS delays are considered).
hide.bs.tooltip The event is fired immediately when the hide instance method is invoked.
hidden.bs.tooltip Fired immediately when the tooltip gets hidden.

1. Bootstrap's tooltip has four events which can be hooked based on the behaviour of tooltip .

Example:Twitter Bootstrap Tooltips Events

Give it a TRY! »