Bootstrap Tool Tip Plugin - Bootstrap

What Is Tool Tip Plug-In In Bootstrap?

Tooltips are handy while you need to define a link. The plugin was motivated by jQuery.tipsy plugin written by Jason Frame. Tooltips have since remained updated to work without images, animate with a CSS animation, and data-attributes for local title storage.

If you need to take in this plugin functionality separately, then you will need tooltip.js. Otherwise, as stated in the section Bootstrap Plugins Summary, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

The tooltip plugin makes content and markup on demand, and by default places tooltips after their trigger element. You can add tooltips in the subsequent two ways −

  • Via data attributes to add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin.


• Via JavaScript − Trigger the tooltip via JavaScript −

Tooltip plugin is NOT only-css plugins similar dropdown or other plugins deliberated in previous sections. To use this plugin you MUST activate it using jquery (read javascript). To allow all the tooltips on your page just use this script –


Example

The next instance shows the use of tooltip plugin via information features.

Tooltip with Anchors

Options


There are particular choices which can be added via the Bootstrap Data API or invoked via JavaScript. Subsequent table lists the options −

Option Name

Type/Default Value

Data attribute name

Description

Animation

booleanDefault: true

data-animation

Applies a CSS fade transition to the tooltip.

Html

booleanDefault: false

data-html

Inserts HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.

Placement

string|functionDefault: top

data-placement

Specifies how to position the tooltip (i.e., top|bottom|left|right|auto).

Whenautois specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.

Selector

stringDefault: false

data-selector

If a selector is provided, tooltip objects will be delegated to the specified targets.

Title

string | functionDefault: "

data-title

The title option is the default title value if thetitleattribute isn’t present.

Trigger

stringDefault: 'hover focus'

data-trigger

Defines how the tooltip is triggered:click| hover | focus | manual. You may pass multiple triggers; separate them with a space.

Content

string | functionDefault: ''

data-content

Default content value ifdata-contentattribute isn't present

delay

number | objectDefault: 0

data-delay

Delays showing and hiding the tooltip in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is −

delay: { show: 500, hide: 100 }
            

Container

string | falseDefault: false

data-container

Appends the tooltip to a specific element. Example: container: 'body'

Methods

The resulting are some useful methods for tooltips −

Method

Description

Example

Options− .tooltip(options)

Attaches a tooltip handler to an element collection.

$().tooltip(options)
            

Toggle− .tooltip('toggle')

Toggles an element's tooltip.

$('#element').tooltip('toggle')
            

Show− .tooltip('show')

Reveals an element's tooltip.

$('#element').tooltip('show')
            

Hide− .tooltip('hide')

Hides an element's tooltip.

$('#element').tooltip('hide')
            

Destroy− .tooltip('destroy')

Hides and destroys an element's tooltip.

$('#element').tooltip('destroy')
            

Example

The resulting instance shows the use of tooltip plugin via data attributes.


Tooltip Method Option

Events

Resulting table lists the actions to work with tooltip plugin. This result may be used to hook into the function.

Event

Description

Example

show.bs.tooltip

This event fires immediately when the show instance method is called.

$('#myTooltip').on('show.bs.tooltip', function () {
            
 // do something
            
})
            

shown.bs.tooltip

This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).

$('#myTooltip').on('shown.bs.tooltip', function () {
            
 // do something
            
})
            

hide.bs.tooltip

This event is fired immediately when the hide instance method has been called.

$('#myTooltip').on('hide.bs.tooltip', function () {
            
 // do something
            
})
            

hidden.bs.tooltip

This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).

$('#myTooltip').on('hidden.bs.tooltip', function () {
            
 // do something
            
})
            

Example

The resulting instance shows the use of tooltip plugin via data attributes.


Default tooltip

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Bootstrap Topics