Tooltip

To create a tooltip

• Create a div and the class tooltip
• Inside it create a span and the class tooltip-body
• Add to the span a class to choose the shape nothing or tooltip-top tooltip-bottom tooltip-right tooltip-left
• To change the shape add to the span the classes rounded circle top-circle bottom-circle right-circle left-circle
• To change the size add to the span the classes tooltip2x tooltip3x tooltip4x
• To change the background color add to the span the classes bg-color-1 bg-color-2 bg-info bg-success bg-black bg-danger bg-dark bg-light-grey
• To add a border add to the span the classes bg-color-1 bg-color-2 bg-info bg-success bg-black bg-danger bg-dark bg-light-grey
• To change the text color add to the span the classes outline-color-1 outline-color-2 outline-color-info outline-color-success outline-color-black outline-color-danger
• To change the size add to the span the classes tooltip2x tooltip3x tooltip4x
• To add shadow add to the span the classes shadow shadow-1 shadow-3 shadow-4

Example code

<div class="tooltip">tooltip-top <span class="tooltip-body tooltip-top bg-color-1 white rounded">Tooltip text</span> </div>

Please hover on the links below to see the designs

Direction

Shapes

Shadow

Sizes

colors

Outlined Colors