Bootstrap 4 Tooltip сохраняется, выглядит ужасно - PullRequest
Новая
       17

Bootstrap 4 Tooltip сохраняется, выглядит ужасно

0 голосов
/ 26 июня 2019

Не могли бы вы выполнить следующий тестовый пример html, чтобы выяснить, как заставить всплывающую подсказку начальной загрузки 4 исчезать, когда кнопка отключена, когда подсказка находится над кнопкой?Подробности относительно моих вопросов приведены в коде.

Редактор stackoverflow недоволен тем, что я помещаю детали в код в виде комментариев, поэтому я повторю некоторые детали здесь, чтобы попытаться сделать редактор счастливым.Когда кнопка отключена, когда курсор находится над ней, всплывающая подсказка не исчезает и выглядит ужасно.Любая помощь приветствуется.

Спасибо 

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

Ответы [ 3 ]

1 голос
/ 26 июня 2019

Просто добавьте в свою функцию change_button() логику для hide, disable и enable подсказок. 

$(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>
0 голосов
/ 27 июня 2019

Я оригинальный постер.Я был удивлен, что азеос предположил, что между двумя ответами было разное поведение, так как я не видел различий в моих тестовых браузерах IE 11 и chrome 74. Так что я провел больше тестов с этими двумя ответами.Оба ответа изменяют функцию change_button в исходном сообщении: 

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');
    }
  }


Чтобы уточнить, правильное (согласуется с другими всплывающими подсказками) поведение:

  • Загрузить страницу
  • Кнопка C имеет всплывающую подсказку при наведении
  • Нажмите кнопку C
  • Кнопка Cотключено и Подсказка для кнопки C исчезает
  • Нажать кнопку D
  • Кнопка C включена и снова имеет всплывающую подсказку


Вот результаты моего дальнейшего тестирования:

  • IE 11 (windows): оба ответа A и B работают
  • chrome 74 (windows): оба ответа A и B работают
  • opera 60 (windows): оба ответа A и B работают
  • safari 10 (mac): оба ответа A и B работают
  • Firefox 67 (Windows): ответ A не удается, B работает.


В Firefox 67 подсказка для кнопки C не исчезла, как предположил Азеос, может быть прoblem.

Когда у меня будет больше времени, я буду больше тестировать.Кроме того, я написал в twbs / bootstrap на github, чтобы сообщить об этом как об ошибке или, по крайней мере, о проблеме, и буду следить за любыми ответами.

Я использовал веб-сайт lambdatest для теста сафари.Я проводил другие тесты непосредственно на рабочем столе Windows 7.

Будем благодарны за любые другие комментарии или предложения, такие как любые тесты, которые не дают ответа B, или любые тесты смартфонов.

0 голосов
/ 26 июня 2019

Вы должны уничтожить всплывающую подсказку после отключения кнопки. 

  function change_button(button_id, bool_val) {
    var button_obj = document.getElementById(button_id);
    $("#" + button_id).tooltip("hide");
    button_obj.disabled = bool_val;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...