<!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
>