Tooltips

Animations and data-attributes for local title storage

There are many options available to display avatars such as square, radius, rounded... And many size options for avatars.

Basic Example

Initialize all tooltips on a page by adding their data-toggle and data-trigger

                                                    
<button type="button" class="btn btn-brand" data-toggle="tooltip" title="Some amazing content!">
    Hover Me
</button>

<button type="button" class="btn btn-brand" data-toggle="tooltip" data-trigger="click" title="Thanks, you clicked on me!">
    Click Me
</button>
                                                    
                                                
Tooltip Directions

Initialize all tooltips on a page by adding their data-toggle and data-trigger

HTML Content

You can insert any HTML into the tooltip.

Offset

Offset of the tooltip relative to its target. Ex: data-offset="20px 20px"

                                                    
<button type="button" class="btn btn-primary mr-2" data-container="body" data-trigger="focus" data-offset="20px 20px" data-toggle="tooltip" data-placement="top" title="Example tooltip!">
    offset 1
</button>
<button type="button" class="btn btn-success mr-2" data-container="body" data-trigger="focus" data-offset="-20px -20px" data-toggle="tooltip" data-placement="top" title="Example tooltip!">
    offset 2
</button>
<button type="button" class="btn btn-danger" data-container="body" data-trigger="focus" data-offset="60px 0px" data-toggle="tooltip" data-placement="top" title="Example tooltip!">
    offset 3
</button>
                                                    
                                                
Tooltip Color

Easy to set the tooltip color

                                                    
<button class="btn btn-brand tooltip-brand" data-container=".tooltip-brand" data-toggle="tooltip" title="Tooltip brand">
    Brand
</button>