Default tooltips

Use the data-placement attribute to position the tooltip on top, right, bottom or left.

Custom tooltips using primary colors

Use the data-toggle="tooltip-primary" attribute to trigger tooltips with the primary color.

Custom tooltips using secondary colors

Use the data-toggle="tooltip-secondary" attribute to trigger tooltips with the secondary color.

Custom tooltips using info colors

Use the data-toggle="tooltip-info" attribute to trigger tooltips with the info color.

Custom tooltips using success colors

Use the data-toggle="tooltip-success" attribute to trigger tooltips with the success color.

Custom tooltips using warning colors

Use the data-toggle="tooltip-warning" attribute to trigger tooltips with the warning color.

Custom tooltips using danger colors

Use the data-toggle="tooltip-danger" attribute to trigger tooltips with the danger color.