Tooltip

Tooltip is a small "hover box" containing information about the item being hovered over. Tooltip appears on hover over an element with the cursor, or focus on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI.

Initialization Function

Use the below function to initialize the Propeller Tooltips in your page.


                        

Bootstrap 4 Tooltip

Bootstrap 4 Tooltips rely on Popper.js so it must be called before bootstrap.js to make it work properly. Tooltip with zero-length titles and of hidden element is never displayed. They use CSS3 animations and data-attributes for local storage.


                            

Propeller Tooltip

Propeller Tooltip uses basic Bootstrap 4 Tooltip customized with Material Standards. To initialize the Propeller Tooltip, add the HTML attribute data-toggle="tooltip". Add .pmd-tooltip to apply propeller theme and animations. To define the tooltip position, use data-placement attribute that takes left, right, top and bottom as values.


                            

Hover over the link below to see tooltip

Propeller is the combination of Material Design and Bootstrap 4 that makes your website more attractive, consistent, and functionally powerful. The Propeller components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. By using Propeller components, you can get basic structure of your design and also customise it easily.


                            

Configuration Options

The table lists some HTML attributes that are required for positioning and styling of the tooltip.

Propeller Class Effect Remark
.pmd-tooltip Defines Propeller theme and animation. Required
HTML Attributes Effect Value
data-toogle To initialize tooltip. tooltip
data-placement Defines the position of the tooltip. Values that can be provided are left, right, top or bottom. left, right, top, bottom
title Defines the content of the tooltip. text, HTML

Methods

See here for more documentation on this.

Method Description
$().tooltip(options) Attaches a tooltip handler to an element collection.
$().tooltip('show') Reveals an element’s tooltip. This is considered a “manual” triggering of the tooltip.
$().tooltip('hide') Hides an element’s tooltip. This is considered a “manual” triggering of the tooltip.
$().tooltip('toggle') Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.
$().tooltip('dispose') Hides and destroys an element’s tooltip.
$().tooltip('disable') Removes the ability for an element’s tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
$().tooltip('enable') Gives an element’s tooltip the ability to be shown. Tooltips are enabled by default.
$().tooltip('toggleEnabled') Toggles the ability for an element’s tooltip to be shown or hidden.
$().tooltip('update') Updates the position of an element’s tooltip.

                        

Events

See here for more documentation on this.

Event Type Description
show.bs.tooltip This event fires immediately when the show instance method is called.
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.tooltip This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.tooltip This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.