Всплывающая подсказка начальной загрузки, игнорирующая атрибут «размещение данных» - PullRequest
Новая
       10

Всплывающая подсказка начальной загрузки, игнорирующая атрибут «размещение данных»

0 голосов
/ 22 мая 2019

Я пытался следовать примеру и документации здесь: https://getbootstrap.com/docs/4.0/components/tooltips/

А здесь: https://getbootstrap.com/docs/4.0/getting-started/introduction/

При наведении курсора на кнопку я ожидаю, что всплывающая подсказка появится над кнопкой.Вместо этого он появляется под кнопкой.Что может быть не так?Вот мой HTML-код: 

<!doctype html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<head>
</head>
<body>
This is some text.<br /><br /><br />
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    </head>
</body>
</html>

1 Ответ

1 голос
/ 22 мая 2019

Вы должны включить компонент подсказки.Он не включается исключительно через включение data-toggle.Вам все еще нужно вызывать его с помощью JavaScript, например: 

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

Как только вы включите этот код в приведенный выше пример, вы получите ожидаемые результаты.В противном случае всплывающая подсказка будет отображаться в браузере.В Google Chrome и Firefox поведение по умолчанию, кажется, помещает эту подсказку ниже кнопки, хотя в Safari, кажется, по умолчанию выше. 

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

This is some text.

<br /><br /><br />

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...