menu

Bootstrap Tooltip


Bootstrap tooltips works as small popup. Bootstrap tooltips are used to provide the hint when user hover’s on any link , button or label.

Tooltips becomes important for new visitors by providing them information about the link or button when they hover on them. You can place the tooltop at any position top, left, right or bottom of link. By default the tootltip color is black.


Bootstrap Tooltip Syntax And Example

Required javascript to create tooptips. Here is an example –

Add Js Code to Enable tooltips

Example

Try it »

The above Example will produce following output-

Bootstrap tooltip example

Bootstrap Tooltip Positions

You can change tooltip position by using data-placement attribute. Here are following positions of tooltips-

  • Top- Attribute data-placement = “top” is used for tooltip top position.
  • Bottom- Attribute data-placement = “bottom” is used for tooltip bottom position.
  • Left- Attribute data-placement = “left” is used for tooltip left position.
  • Right- Attribute data-placement = “right” is used for tooltip right position.

Example

Try it »

The above example will output something like this-

Bootstrap tooltip example

Add Bootstrap positions using JavaScript

You can also add positions using javascript. Here we are going to bind tooltip positions using javascript and class of element-

  • Top- $(selector).tooltip({placement : ‘top’}) is used for tooltip top position.
  • Bottom- $(selector).tooltip({placement : ‘bottom’}) is used for tooltip bottom position.
  • Left- $(selector).tooltip({placement : ‘left’}) is used for tooltip left position.
  • Right- $(selector).tooltip({placement : ‘right’}) is used for tooltip right position.

Example

Try it »

The Output of the above example will be –

Bootstrap tooltip demo

Options

Lets Have an overview on available options

Here are options available which can used via data-attribute or JavaScript.

OptionTypeDefault ValueData Attribute DescriptionDemo
animationbooleantrue data-animationUsed to add fade transition to the tooltip.
placementstring'top'data-placementUsed to add tooltip position. Default position is top.
htmlbooleanfalsedata-htmlUsed to add html content in tooltip.
selectorstringfalsedata-selectorAdds tooltip to the specified selector.
titlestring|functiondata-title Adds text to the tooltip title.
triggerstringhover focusdata-triggerbinds event how it tooltip trigger will happen example- on click- on hover – on focus or manually.
containerstringfalsedata-container Appends tooltip in container element Example "body".
delaynumber|object0data-delay Defines the seconds to show and hide tooltip.