Давайте використаємо приклад, щоб показати, як підказки можна додавати до будь-якого елемента 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>
ІНІЦІАЛІЗАТОР
<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. Але вам НЕ доведеться форматувати свої елементи певним чином. Виглядає Initializer для HTML елементів tooltip-demo
в class
атрибуті, потім викликає tooltip()
метод для ініціалізації будь-яких дочірніх елементів , які мають атрибут 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>
ІНІЦІАЛІЗАТОР
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
атрибуті для ідентифікації елементів підказки. Це не дозволить ініціалізатору Tooltip не заважати елементам, на які впливає 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>
ІНІЦІАЛІЗАТОР
<script>
// Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
$(document).ready(function ()
{
$('.standalone-tt').tooltip();
}
);
</script>