Tooltips
<a href="javascript:void(0);" class="btn btn-primary mb-3 rounded bs-tooltip" title="Tooltip using ANCHOR tag"> Link</a><button type="button" class="btn btn-success mb-3 rounded bs-tooltip" title="Tooltip using BUTTON tag"> Button</button>
Placement
data-placement="top"
data-placement="right"
data-placement="bottom"
data-placement="left"
<!-- TOP --> <button type="button" class="btn btn-info mb-2 rounded bs-tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top</button><!-- RIGHT --> <button type="button" class="btn btn-danger mb-2 rounded bs-tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right</button><!-- BOTTOM --> <button type="button" class="btn btn-warning mb-2 rounded bs-tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom</button><!-- LEFT --> <button type="button" class="btn btn-secondary mb-2 rounded bs-tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left</button>
HTML
<button type="button" class="btn btn-dark rounded bs-tooltip" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML</button>
Options
data-trigger="click"
Default
data-delay="1000"
data-animation="false"
<!-- On Click --><button type="button" class="mt-1 btn btn-primary bs-tooltip mb-4 ml-2 mr-2 rounded" data-trigger="click" title="On Click"> On Click</button><!-- On Focus --><button type="button" class="mt-1 btn btn-secondary bs-tooltip mb-4 ml-2 mr-2 rounded" title="On Focus"> On Focus</button><!-- Delay --><button type="button" class="mt-1 btn btn-info bs-tooltip mb-4 ml-2 mr-2 rounded" data-delay="1000" title="Delay 1s"> Delay</button><!-- Disabled Animation --><button type="button" class="mt-1 btn btn-dark bs-tooltip mb-4 ml-2 mr-2 rounded" data-animation="false" title="Disable Animation"> Disabled Animation</button>
Colors
Change tooltip template html as shown below to add color scheme.
<!-- Primary --><button type="button" class="mt-1 btn btn-primary primary mb-4 ml-2 mr-2 rounded" data-container="body" data-placement="top" data-html="true"> Primary </button>$('.primary').tooltip({ template: '<div class="tooltip tooltip-primary" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', title: "Primary"});
Copyright © 2020 DesignReset, All rights Reserved .
Coded with