CODEWITHSUNDEEP
jquerycsstwitter-bootstrapbootstrap-4
user3133452
user3133452

Reputation: 23

Bootstrap 4 Tooltip Persists, Looks Terrible

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? The details concerning my questions are listed in the code.

The stackoverflow editor is not happy with me putting the details into the code as comments, so I will repeat some details here to try to make the editor happy. When a button is disabled while the cursor is hovering over it, the tooltip does not go away, and it looks terrible. Any assistance 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>

Upvotes: 0

Views: 470

Answers (3)

user3133452
user3133452

Reputation: 23

I am original poster. I was surprised by azeos suggesting that behavior was different between the two answers, since I saw no difference in my test browsers IE 11 and chrome 74. So I did more testing with the two answers so far. Both answers modify change_button function in original post:

function change_button(button_id, bool_val) { /* A */
  var button_obj = document.getElementById(button_id);
  $("#" + button_id).tooltip("hide");
  button_obj.disabled = bool_val;
  }

//////

function change_button(button_id, bool_val) { /* B */
  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');
    }
  }


To clarify, the correct (consistent with other bootstrap tooltips) behavior is:

  • Load page
  • Button C has tooltip on hover
  • Click Button C
  • Button C is disabled and Button C tooltip goes away
  • Click Button D
  • Button C is enabled and has tooltip on hover again


Here are results of my further testing:

  • IE 11 (windows): both answers A and B work
  • chrome 74 (windows): both answers A and B work
  • opera 60 (windows): both answers A and B work
  • safari 10 (mac): both answers A and B work
  • firefox 67 (windows): answer A fails, B works.


With firefox 67, Button C tooltip did not go away, as azeos suggested might be a problem.

When I have more time, I will do more testing. Also, I posted to twbs/bootstrap on github to report this as a bug, or at least an issue, and will be following any responses.

I used lambdatest website for safari test. I did other tests directly on a windows 7 desktop.

Any other comments or suggestions would be appreciated, such as any tests that make answer B fail, or any smartphone tests.

Upvotes: 0

Alok Mali
Alok Mali

Reputation: 2881

You have to destroy tooltip after button disabled.

  function change_button(button_id, bool_val) {
    var button_obj = document.getElementById(button_id);
    $("#" + button_id).tooltip("hide");
    button_obj.disabled = bool_val;
  }

Upvotes: 0

aze&#243;s
aze&#243;s

Reputation: 4901

Just add into your change_button() function the logic to hide, disable and enable the tooltips.

$(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;

  // Disable tooltip
  if (bool_val) {
    $('#' + button_id).tooltip('hide').tooltip('disable');
  } else {
    $('#' + button_id).tooltip('enable');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <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>
</div>

Upvotes: 1

Related Questions