Can you please execute the following HTML test case in order to help identify a solution for making a Bootstrap 4 tooltip disappear when a button is disabled while the tooltip is hovering over the button? The specific issues I am facing are outlined within the code.
The Stack Overflow editor is rejecting my attempt to include the details as comments within the code, so I will reiterate some key points here. When a button is disabled and the cursor hovers over it, the tooltip remains visible, which is aesthetically unpleasing. Any assistance with resolving this would be greatly appreciated.
Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Tooltip Issue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap 4 Tooltip Issue</h3>
<br> "Other button disabled" scenario works correctly.
<br> Initial hover over buttons reveals tooltips.
<br> Upon clicking Button A to disable Button B:
<br> - Button B is disabled with no tooltip.
<br> - Tooltip on Button A functions properly.
<br> <br>
<button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'>
Button A
</button>
<button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A">
Button B
</button>
<br> <br> <hr>
<br> "Same button disabled" scenario fails.
<br> Hover over Button C displays tooltip.
<br> Clicking Button C to disable itself results in:
<br> - Button C gets disabled.
<br> - However, the tooltip on Button C persists, causing a visual issue.
<br> <br>
<button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'>
Button C
</button>
<button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'>
Button D
</button>
<br> <br> <hr> <br>
When a button is disabled while its tooltip is shown, the tooltip persists.
<strong>
Could you provide guidance on how to hide the tooltip when Button C is disabled?
</strong>
Ideally, the tooltip should disappear upon Button C being disabled,
consistent with the default behavior of Bootstrap with disabled buttons.
As the disabled button may later become enabled again, deleting the title attribute is not desired.
Essentially, I want Bootstrap to handle Button C the same way it handles Button B when disabled.
Despite attempting various solutions, I have been unable to resolve this issue.
There are cases where a button performs an action before becoming disabled,
hence any assistance is greatly valued. Thank you
</div>
<script>
$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});
function change_button (button_id, bool_val) {
var button_obj = document.getElementById (button_id);
button_obj.disabled = bool_val;
}
</script>
</body>
</html>