Button or link elements with disabled class and attribute is not interactive. It means users cannot focus, hover, or click them to trigger a tooltip (or popover) or any functions. Use the following approaches to enable a tooltip on disabled-buttons.
- Using jQuery
- Using HTML
- Using CSS
Initializing tooltip:
- By default tooltips is initialized by selecting the specified element and call the tooltip() method using jQuery. Then add a title attribute to that specified element which contains what text to be displayed inside tooltip.
- To position the tooltip data-placement attribute must be added to that specified element with top/bottom/right/left as its values.
// Initializing the tooltip $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); });
Note: By default data-toggle=”tooltip” will enable tooltip of disabled button.
Approach:
- Initialize tooltips in bootstrap disabled buttons with the specified element and call the tooltip() method.
- To trigger tooltip on disabled button by wrapping them in <span> span tag and <div> div tag and then adding ‘data-toggle’,’data-placement’ and ‘title’ attributes to it along with its values respectively.
Example: This example illustrates triggering tooltip by wrapping disabled button inside div and span tag.
<!DOCTYPE html> < html lang="en">
< head >
< title >Disabled Button Tooltip</ title >
< meta charset="utf-8">
< meta name="viewport"
content=" width = device -width, initial-scale = 1 ">
< link rel="stylesheet" href=
< script src=
</ script >
< script src=
</ script >
< script src=
</ script >
< style >
.disabled {
pointer-events: all !important;
}
</ style >
</ head >
< body style="text-align:center;">
< div class="container pt-5">
< h1 style="color:green;">
GeeksforGeeks
</ h1 >
< h4 >
Disabled buttons wrapped inside an elements
</ h4 >
< div class="d-inline-block" tabindex="0" data-toggle="tooltip"
data-placement="bottom" title="This button is disabled">
< button type="button" class="btn btn-warning"
style="pointer-events: none;" disabled>
Button wrapped in Div tag
</ button >
</ div >
< span class="d-inline-block" tabindex="0" data-toggle="tooltip"
data-placement="right" title="This button is disabled">
< button class="btn btn-outline-warning"
style="pointer-events: none;"type="button" disabled>
Button wrapped in span tag
</ button >
</ span >
</ div >
< script >
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This example uses HTML to display tooltip information about the content on any disabled button. For this, just disable the button and add the title attribute on it.
<!DOCTYPE html> < html >
< head >
< title >
Tooltip on disabled button
</ title >
< style >
h1 {
color: green;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h3 >Tooltip on Disabled button</ h3 >
< div >
< button disabled="disabled" title="My Tooltip">
Disabled Button
</ button >
< button title="Here it's common">Not Disabled</ button >
</ div >
</ center >
</ body >
</ html >
|
Output:
Example 3: Trigger tooltip on disabled bootstrap buttons using CSS.
<!DOCTYPE html> < html >
< title >Disabled Button Tooltip</ title >
< style >
.tooltip1 {
position: relative !important;
display: inline-block !important;
width: 175px !important;
font-size: 14px;
}
.tooltip1 .tooltiptext {
visibility: hidden;
width: 120px !important;
background-color: black !important;
color: #fff !important;
text-align: center !important;
border-radius: 6px !important;
padding: 5px 0 !important;
position: absolute !important;
z-index: 1 !important;
top: -5px !important;
left: 110% !important;
}
.tooltip1 .tooltiptext::after {
content: "";
position: absolute !important;
top: 50% !important;
right: 100% !important;
margin-top: -5px !important;
border-width: 5px !important;
border-style: solid !important;
border-color: transparent black transparent transparent !important;
}
.tooltip1:hover .tooltiptext {
visibility: visible !important;
}
</ style >
< body style="text-align:center;">
< div class="container pt-5">
< h1 style="color:green;">
GeeksforGeeks
</ h1 >
< h4 >
Trigger tooltip on disabled
bootstrap buttons using CSS
</ h4 >
< button class="btn btn-outline-info tooltip1 " disabled>
Hover over me
< span class="tooltip1 tooltiptext">
disabled button
</ span >
</ button >
</ div >
</ body >
</ html >
|
Output: