-
English
-
Clear All Notification
View AllCaleb Flakelar commented on Admin 1 min ago
New user registered. 5 hours ago
Cristina Pride
Hi, How are you? What about our next meeting
Caleb Flakelar commented on Admin 4 days ago
Karen Robinson
Wow ! this admin looks good and awesome design
Carlos Crouch liked Admin 13 days ago
-
Dominic Keller
Founder
Tooltips
Examples
Hover over the links below to see tooltips.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<p class="muted mb-0">
Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't heard
of them. Photo booth beard raw denim letterpress vegan messenger bag
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa
8-bit american apparel <a href="#" data-toggle="tooltip" title="" data-original-title="Another tooltip">have a</a> terry richardson
vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan
chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="" data-original-title="Another one here too">whatever
</a> keytar, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="" data-original-title="The last tip!">twitter handle</a> freegan cred
raw denim single-origin coffee viral.
</p>
Disabled elements
Elements with the disabled attribute
aren’t interactive, meaning users cannot focus, hover, or click them to trigger
a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from
a wrapper <div> or <span>, ideally made
keyboard-focusable using tabindex="0", and override the
pointer-events on the disabled element.
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Four Directions
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
<button type="button" class="btn btn-info" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-info" data-toggle="tooltip"
data-placement="bottom" title=""
data-original-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-info" data-toggle="tooltip"
data-placement="left" title="Tooltip on left">Tooltip on
left</button>
<button type="button" class="btn btn-info" data-toggle="tooltip"
data-placement="right" title=""
data-original-title="Tooltip on right">Tooltip on right</button>
HTML Tags
And with custom HTML added:
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>