# 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.

## Bootstrap Tooltip

It is an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. Tooltip with zero-length titles is never displayed.

## Propeller Tooltip

Propeller tooltip uses basic Bootstrap 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. `data-placement` attribute can take left, right, top and bottom as values.

Hover over the link below to see tooltip

Propeller is the combination of Material Design and Bootstrap 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

## 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.