Позволяет использовать пример, чтобы показать, как всплывающие подсказки могут быть добавлены к любому элементу HTML в вашем документе.
Примечание:
Если эти образцы всплывающих подсказок не работают, когда вы помещаете их на страницу, у вас есть другая проблема. Вы должны смотреть на такие вещи, как:
- Порядок включения скриптов
- Проверьте, не пытаетесь ли вы инициализировать удаленные элементы HTML
- Проверьте, не пытаетесь ли вы вызывать методы в файлах JS, в которые вы больше не включаете
Посмотрите, включаете ли вы файл JS, предоставляющий необходимые вам функции (не только для всплывающих подсказок, но и для любых компонентов, которые вы используете на странице).
<head>
<link rel="stylesheet" href="/Content/bootstrap.css" />
<link rel="stylesheet" href="/Content/animate.css" />
<link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
... your HTML code ...
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
... your JavaScript initializers ...
</body>
Отказ ЛЮБОГО из вышеперечисленных элементов может (и часто делает) препятствовать загрузке и / или запуску javascript, и это делает все в порядке и не работает.
РАБОЧИЕ ПРИМЕРЫ
Допустим, у вас есть значок, и вы хотите, чтобы он отображал всплывающую подсказку, когда пользователь наводит на нее курсор.
Оригинальный HTML:
<span class="badge badge-sm badge-plain">Admin Mode</span>
Обычные всплывающие подсказки
Если вы создаете всплывающие подсказки для элемента HTML и используете всплывающие подсказки Plain Bootstrap, то вы будете нести ответственность за вызов инициализаторов всплывающей подсказки со своим собственным кодом JavaScript.
до
<span class="badge badge-sm badge-plain">Admin Mode</span>
ПОСЛЕ
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
Initializer
<script>
// Initialize any Tooltip on this page
$(document).ready(function ()
{
$('[data-toggle="tooltip"]').tooltip();
}
);
</script>
Всплывающие подсказки шаблона начальной загрузки (например, INSPINIA)
Если вы используете шаблон начальной загрузки (например, INSPINIA), вы включаете вспомогательный скрипт для поддержки функций шаблона:
<script src="/Scripts/app/inspinia.js" />
В случае INSPINIA включенный скрипт автоматически инициализирует все всплывающие подсказки, выполнив следующий код JavaScript после завершения загрузки документа:
// Tooltips demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
});
Из-за этого вам НЕ нужно инициализировать подсказки в стиле INSPINIA самостоятельно. Но вы ДОЛЖНЫ форматировать свои элементы определенным образом. Инициализатор ищет элементы HTML с tooltip-demo в атрибуте class, а затем вызывает метод tooltip() для инициализации любых элементов child , для которых определен атрибут data-toggle="tooltip".
Для нашего примера значка поместите вокруг него внешний элемент (например, <div> или <span>) с class="tooltip-demo", затем поместите атрибуты data-toggle, data-placement и title для фактического всплывающая подсказка внутри элемента, который является значком. Измените исходный HTML сверху, чтобы он выглядел примерно так:
ДО
<span class="badge badge-sm badge-plain">Admin Mode</span>
ПОСЛЕ
<span class="tooltip-demo">
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
</span>
Initializer
None
Обратите внимание, что любые дочерние элементы в элементе <span class="tooltip-demo"> будут иметь правильно подготовленную всплывающую подсказку. Я мог бы иметь три дочерних элемента, все нуждающиеся во всплывающих подсказках, и поместить их в один контейнер.
Несколько предметов, каждый с всплывающей подсказкой
<span class="tooltip-demo">
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>
Лучшее использование для этого - добавить class="tooltip-demo" к <td> или к внешнему <div> или <span>.
Обычные подсказки начальной загрузки при использовании шаблона
Если вы используете INSPINIA, но не хотите добавлять дополнительные внешние теги <div> или <span> для создания всплывающих подсказок, вы можете использовать стандартные всплывающие подсказки начальной загрузки, не влияя на шаблон. В этом случае вы будете нести ответственность за инициализацию подсказок самостоятельно. Однако вам следует использовать пользовательское значение в атрибуте class, чтобы идентифицировать элементы всплывающей подсказки. Это предотвратит вмешательство инициализатора всплывающей подсказки в элементы, затронутые INSPINIA. В нашем примере давайте используем standalone-tt:
до
<span class="badge badge-sm badge-plain">Admin Mode</span>
ПОСЛЕ
<span
class="standalone-tt badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
Initializer
<script>
// Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
$(document).ready(function ()
{
$('.standalone-tt').tooltip();
}
);
</script>