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 wraping 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 wraping 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 Disabaled</ button > </ div > </ center > </ body > </ html > |
Output:
Example 3: Tigger 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: