Jump to content

Bootstrap 4 Tooltip Persists, Looks Terrible


vitalnet

Recommended Posts

Could you please run the following html test case, to help figure out how to make bootstrap 4 tooltip go away when a button is disabled while the tooltip is over the button? All the details concerning my question are in the source code for display when the HTML is displayed. Any help appreciated. Thanks

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Tooltip Persists, Looks Terrible</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 Persists, Looks Terrible</h3>
<br> "Other button disabled" scenario works fine.
<br> First, hover over buttons. Look at tooltips while hovering.
<br> Then, click button A to disable button B. Works fine:
<br> - Button B is disabled, and no tooltip.
<br> - Tooltip still works correctly on button A.
<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> First, hover over Button C. Look at the tooltip.
<br> Then, click button C to disable button C. Messes up:
<br> - Button C is disabled, so that part is OK.
<br> - But Button C tooltip persists, looks terrible.
<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>
So if a button is disabled while the cursor is hovering over it, the tooltip persists.
<strong>
Could you please explain how to make tooltip go away when Button C is disabled?
</strong>
I would prefer if tooltip went away when Button C disabled,
since that is default behavior of bootstrap disabled buttons.
And disabled button may later get enabled again, so I do not want to delete title attribute.
Basically I want bootstrap to behave the same way as when Button B is disabled.
I have looked around and cannot find how to fix this problem,
and have tried various things, with no success.
There are real instances where a button carries out an action,
and then the button needs to be disabled, so I appreciate the help. Thanks
</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>

 

Edited by vitalnet
add jquery tag
Link to comment
Share on other sites

I posted my question / bug report separately to stackoverflow and got two helpful answers, one of which seems to work correctly on cross-browser testing. I did multiple tests with with four recent desktop browsers, with iphone safari browser, and with android chrome, and have concluded that the following modification of the change_button function (from the original post) gets rid of the persistent tooltip, at least with my tests:

 

function change_button(button_id, bool_val) {
  var button_obj = document.getElementById(button_id);
  button_obj.disabled = bool_val;
  if (bool_val) {
    $('#' + button_id).tooltip('hide').tooltip('disable');
    }
  else {
    $('#' + button_id).tooltip('enable');
    }
  }

 

I posted on github bootstrap site, hope that bootstrap might take the above logic and somehow incorporate into bootstrap so that the tooltip would work correctly by default, not required extra programming. Other buttons lose their tooltip when they get disabled. But in the "button disables itself" case, the tooltip incorrectly persists. To me, that is a bug.

At least in the meantime, I think I have a method where I can make the tooltips behave correctly. And maybe my posts will help others running into the same problem.

If anyone can find a fault with the improved function, or has any other suggestions, please post. Thanks
 

Link to comment
Share on other sites

  • 5 months later...

Hi @vitalnet,
I have tried to code as per your requirement. Kindly check the same. Hope it will work for you.
 

<html lang="en">
<head>
    <title>Bootstrap 4 Tooltip Persists, Looks Terrible</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 Persists, Looks Terrible</h3>
        <br> "Other button disabled" scenario works fine.
        <br> First, hover over buttons. Look at tooltips while hovering.
        <br> Then, click button A to disable button B. Works fine:
        <br> - Button B is disabled, and no tooltip.
        <br> - Tooltip still works correctly on button A.
        <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> First, hover over Button C. Look at the tooltip.
        <br> Then, click button C to disable button C. Messes up:
        <br> - Button C is disabled, so that part is OK.
        <br> - But Button C tooltip persists, looks terrible.
        <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>
        So if a button is disabled while the cursor is hovering over it, the tooltip persists.
        <strong>
            Could you please explain how to make tooltip go away when Button C is disabled?
        </strong>
        I would prefer if tooltip went away when Button C disabled,
        since that is default behavior of bootstrap disabled buttons.
        And disabled button may later get enabled again, so I do not want to delete title attribute.
        Basically I want bootstrap to behave the same way as when Button B is disabled.
        I have looked around and cannot find how to fix this problem,
        and have tried various things, with no success.
        There are real instances where a button carries out an action,
        and then the button needs to be disabled, so I appreciate the help. Thanks
    </div>
    <script>
        $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); });
        function change_button(button_id, bool_val) {
            if (button_id === 'button_c') {
                $('[data-toggle="tooltip"]').tooltip('hide');
            }
            var button_obj = document.getElementById(button_id);
            button_obj.disabled = bool_val;
        }
    </script>
</body>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...