Bootstrap Tooltips and Popovers Extend By Adding Custom Classes

Bootstrap-Tooltip-Custom-Class

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

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 Usage, please go to the official website.

Share