Get Karik Now

Tooltips

Animations and data-attributes for local title storage

  1. Home
  2. Elements
  3. Tooltips

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>