Press "Enter" to skip to content

Bootstrap Tooltips and Popovers Extend By Adding Custom Classes

Bootstrap Tooltips and Popovers extend by adding custom categories. This is a lightweight jQuery / CSS extension to Bootstrap 3/4 that adds additional Styles (Classes) to Bootstrap’s native tooltips.

tooltip vs popover, what is tooltip message, popover bootstrap, tooltip alternatives, tooltip bootstrap, popover design system, tooltip popover testing

A Pure CSS/SCSS/LESS Animated Tooltips Library | Tootik

How to make use of it:

1. Import the mandatory jQuery library and Bootstrap 4 (or Bootstrap 3) framework into the doc.

<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<script src="/path/to/jquery.min.js></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Import the Bootstrap Custom Class’ JavaScript and CSS files into the doc.

<link rel="stylesheet" href="bootstrap-tooltip-custom-class.css" />
<script src="bootstrap-tooltip-custom-class.js"></script>

3. Add pre-built {custom} styles to the Bootstrap tooltips utilizing the data-custom-class.

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-primary" title="Tooltip primary example">Tooltip primary</button>

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-success" title="Tooltip success example">Tooltip success</button>

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-info" title="Tooltip info example">Tooltip info</button>

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-warning" title="Tooltip warning example">Tooltip warning</button>

<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-danger" title="Tooltip danger example">Tooltip danger</button>

4. To add a {custom} CSS class to the tooltip.

$('.btn').tooltip({
  customClass: 'my-custom'
});
.my-custom {
  /* your styles here */
}

Add Custom Styles/Classes To Bootstrap 4/3 Tooltips, Bootstrap Tooltip Custom Class Plugin/Github


See Demo And Download

Official Website(andreivictor): Click Here

This superior jQuery/javascript plugin is developed by andreivictor. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *