jQuery Extension To Create Custom Bootstrap 3/4 Tooltips

jQuery Extension To Create Custom Bootstrap 3/4 Tooltips
File Size: 12.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Bootstrap Tooltip Custom Class is an ultra-light jQuery script used to extend the default Bootstrap 3/4 tooltip component with custom CSS styles and classes.

How to use it:

1. To use this plugin, make sure you have loaded the jQuery library and Bootstrap framework in the document.

<link rel='stylesheet' href='/path/to/bootstrap.min.css'>
<script src='/path/to/jquery-3.2.1.slim.min.js'></script>
<script src='/path/to/bootstrap.min.js'></script>

2. Include the Bootstrap Tooltip Custom Class's JavaScript and Stylesheet in the document.

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

3. Add pre-defined CSS styles to the Bootstrap tooltips using data-custom-class attribute.

<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. Add custom CSS classes to the Bootstrap tooltips.

<button class="btn btn-custom" data-toggle="tooltip" data-placement="bottom" title="Custom tooltip example">Custom tooltip</button>
<button class="btn btn-custom-alt" data-toggle="tooltip" data-placement="bottom" title="Another custom tooltip">Another custom tooltip</button>
  customClass: 'tooltip-custom'

  customClass: 'tooltip-custom-alt'

5. Override the default variables in the bootstrap-tooltip-custom-class.scss.

$blue:    #007bff !default;
$red:     #dc3545 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$cyan:    #17a2b8 !default;

This awesome jQuery plugin is developed by andreivictor. For more Advanced Usages, please check the demo page or visit the official website.