Підказки для завантажувальних інструментів не працюють


260

Я тут збожеволію.

У мене є такий HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

І підказка в стилі Bootstrap відмовляється відображатися, лише звичайна підказка.

У мене bootstrap.css працює чудово, і там я бачу заняття

У мене в кінці файлу HTML є всі відповідні файли JS:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

Я переглянув джерело прикладу Bootstrap і не бачу нічого, що ініціює підказку будь-де там. Тож я здогадуюсь, що це має просто працювати, чи я пропускаю тут щось життєво важливе?

У мене є модалі та сповіщення та інші речі, які працюють просто чудово, тому я не є загальним дебілом;)

Дякуємо за будь-яку допомогу!


2
Підказка підручника починається у файлі application.js у прикладі щебетання. Чи можете ви розмістити свій html? Хочете поглянути на те, як ви ініціалізуєте сценарій.
Андрес Ілліч

2
Аааааа .... Я проігнорував це, давши перший коментар. Так має працювати: code<a href="#" rel="tooltip" title="Приятний tooltip" class="tooltip-test"> тест </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>
Майк Бартлетт

1
не забудьте передати селектор під параметри підказки,$('.tooltip-test').tooltip({ selector: "a" })
Андрес Ілліч,

Спасибі Андрес. Насправді мені, здається, не потрібен селектор там, я думаю, що це тому, що клас a посилається на тест підказки.
Майк Бартлетт

3
Без опції селектора підказка не працює для мене, ось демонстрація, яку я виставляю: jsfiddle.net/VXctp , спробуйте її без селектора.
Андрес Ілліч

Відповіді:


276

Підводячи підсумок: активуйте підказки за допомогою селекторів jQuery

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

Насправді, вам не потрібно використовувати селектор атрибутів, ви можете викликати його на будь-якому елементі, навіть якщо його немає rel="tooltip"у своєму тезі.


13
Для тих , хто працює з Rails, це вже визначено в bootstrap.js.coffeeс $(".tooltip").tooltip(). Просто переконайтеся, що включено //= require bootstrapу свій application.js.
slhck

6
Додавання класу .tooltip до будь-якого елемента порушить підказки для мене. Вміст всередині елемента з класом .tooltip буде приховано, і підказка покаже, чи вдасться ми знайти прихований елемент за допомогою миші. Використання будь-якого іншого вибору селектора чи класу буде добре працювати. \
Leonel Galán

4
@Leito, що правильно, завантажувальна програма визначає стилі для .tooltipта за замовчуванням вони невидимі. relОднак ви можете використовувати атрибут або будь-який інший клас як вибір.
Мануель Еберт

3
Так, вам потрібні ОБМЕЖЕННЯ HTML-позначки та селектори JS. Це не альтернативні способи застосування підказок.
ATSiem

1
Деякі можуть намагатися відобразити підказку в модальному режимі, але це не працює у всіх завантажувальних версіях. Якщо ви спробуєте це на звичайній сторінці, а не модальній, і вона працює, то ви знаєте, що в цьому проблема.
mjnissim

212

Випробувавши ту саму проблему, я виявив, що це рішення працює без необхідності додавати додаткові атрибути тегів поза необхідними атрибутами Bootstrap.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

Сподіваюсь, це допомагає!


20
Дякую! Це працювало для мене. Якось інші рішення на цій сторінці не працювали для мене.
Роман

1
Я з Романом. Це рішення працює і з варіантами css bootswatch.
DaveCS

Це працювало для мене. Ніщо інше не заштовхнуло це в життя, поки я не спробував цього. Дякую!
BlakePetersen

1
Це працювало і для мене. Будь-яка ідея, чому $ ('[data-toggle = "tooltip"]'). Tooltip ({'розташування': 'top'}); не працює?
ZeroCool

Дякую, це працювало для мене. Просто переконайтесь, що ви вставляєте код між тегами <script> ПІСЛЯ завантаження бібліотеки JQuery.
GeraldScott

31

Вам не потрібні всі js-файли окремо

Просто використовуйте такі файли, якщо ви збираєтесь використовувати всі функції завантаження:

-bootstrap.css
-bootstrap.js

їх обох можна знайти на http://twitter.github.com
та нарешті
-найподальшій версії jquery.js


Для гліфіконів потрібне зображення

glyphicons-halfings.png та / або glyphicons-halfings-white.png (зображення кольорового кольору білого кольору),
які потрібно завантажити у / img / папку вашого веб-сайту (або) зберігати його куди завгодно, але змінити каталог папок всередині завантажувальної програми .css


Для підказки вам потрібен наступний сценарій всередині вашого <head> </head>тегу

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

Це воно...


27

http://getbootstrap.com/javascript/#tooltips-usage

Функціонал відключення З міркувань продуктивності, підказки Tooltip і Popover є оптимізованими

Ви повинні їх ініціалізувати самостійно.

Один із способів ініціалізації всіх підказок на сторінці - це виділення їх за атрибутом перемикання даних:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

введення цього фрагмента коду у ваш HTML дозволяє використовувати підказки

Приклади:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

2
Дякуємо, що поділилися цією концепцією відбору! Ніколи не читайте його з будь-яких навчальних посібників.
dpp

Рішення для всіх моїх підказок jquery / bootstrap
DJ Burb

Відсутнє посилання: перегляньте сторінку getbootstrap.com/docs/4.1/components/tooltips
Гійом Хуста

20

Я знаю, що це давнє запитання, але оскільки у мене виникла ця проблема з новим випуском завантажувальної програми та її не зрозуміло на веб-сайті, ось як увімкнути підказку.

дайте своєму елементу такий клас, як "підказка-тест"

потім активуйте цей клас у своєму тезі JavaScript:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Це єдине рішення, яке працювало для мене. Я використовую data-original-title = "{{someAngularJSVar}}", щоб оновити назву, і вона працює бездоганно.
WKara

19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Ця робота для мене.


1
Ця пропозиція чудово працювала і для мене. Мені це сподобалось, тому що він простий і елегантний. Це дозволяє продовжувати використовувати стандарти Bootstrap так, як якщо б плагін був ініційований за замовчуванням, як це відбувається з елементами Dropdown і Tab. Я додав запропонований @Igor JS до нового файлу і додав його до оригінального bootstrap.js
Iago Rodríguez-Quintana,

14

Якщо ви зробите так, $("[rel='tooltip']").tooltip();як запропонували інші відповіді, тоді ви будете активувати підказки лише для елементів, які зараз є у DOM. Це означає, що якщо ви збираєтеся змінити DOM і вставити динамічний контент пізніше, він не працюватиме. Також це набагато менш ефективно, оскільки він встановлює обробник подій для окремих елементів на відміну від використання делегування подій JQuery. Тож найкращий спосіб активувати підказки Bootstrap - це один рядок коду, який ви можете розмістити в готовому документі та забути про нього:

$(document.body).tooltip({ selector: "[title]" });

Зауважте, що я використовую titleяк селектор замість rel=titleабо data-title. Це має ту перевагу , що він може бути застосований до багатьох інших елементів ( relяк передбачається , буде тільки для анкерів) , а також працює як «запасний варіант» для старих браузерів.

Також зауважте, що вам не потрібен data-toggle="tooltip"атрибут, якщо ви використовуєте наведений вище код.

Підказки для завантажувальних інструментів є дорогими, оскільки вам потрібно обробляти події миші на кожному з елементів. Саме тому вони не включили його за замовчуванням. Тож якщо ви коли-небудь вирішите коментувати вище рядка, ваша сторінка все одно працюватиме, якщо ви використовуєте атрибут заголовка.

Якщо ви добре не використовуєте атрибут заголовка, я рекомендую використовувати чисте CSS-рішення, наприклад Hint.css, або перевірити http://csstooltip.com, для якого взагалі не потрібен код JavaScript.


Я борюся з цим, тому що динамічне покоління йде на кілька рівнів глибше. Значення href - це динамічно генерований контент, і отриманий ідентифікатор div заснований на номері елемента, який відповідає значенню href. Отже, якщо у мене є сторінка посилань предмета типу А, то у мене є список пункту а-1, пункт а-2, пункт а-3, кожне з цих посилань - на окремі сторінки, але я хочу вміст підказки для відображення динамічного контенту на наведення курсору, тому користувач може отримати деяке уявлення про предмет, перш ніж натиснути на повне посилання.
Меланія Сумнер

Це було найбільш корисно. У мене була підказка, встановлена ​​для прив’язки до значка, і бібліотека значків мала якесь асинхронне завантаження, тому воно не могло прив’язати. Це було настільки дивно, оскільки він працював би при використанні селектора класу, але не ідентифікатора. Дякую за твою допомогу!
Нік Вудгемс

14

Це найпростіший спосіб. Просто поставте це раніше </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

Перегляньте приклади, наведені в документації Bootstrap про підказки .

Наприклад:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

2
будь ласка, закрийте атрибут типу ... редагування лише однієї помилки - PITA: S
Mohd Abdul Mujib

10

Підказка та popover - це не лише плагіни css, такі як спадне меню або панель прогресу. Щоб користуватися підказками та переходом, ПОТРІБНО активувати їх за допомогою jquery (читати javascript).

Отже, скажімо, що ми хочемо, щоб показ попову був показаний при натисканні кнопки html.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Тоді вам потрібно мати наступний код javascript для активації переїзду:

$('.popovers-to-be-activated').popover();

Насправді, вище код JavaScript активує popover на всіх html-елементах, які мають клас "popovers-to-be-active".

Потрібно говорити, що поставте вищевказаний JavaScript всередині зворотного дзвінка, готового до DOM, щоб активувати всі перехожі, як тільки DOM буде готовий:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

5

у головному розділі потрібно спочатку додати наступний код

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Потім у розділі тіла вам потрібно зробити наступний код

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>


4

Якщо все ще не вирішено Використовуйте останню бібліотеку Jquery, вам не потрібен будь-який із селекторів jquery, якщо ви використовуєте останню завантажувальну версію 2.0.4 та jquery-1.7.2.js

Просто використовуйте rel="tooltip" title="Your Title" data-placement=" "

Використовуйте верхній / нижній / лівий / правий у розміщенні даних відповідно до вашого бажання.


3

Я додав jquery та bootstrap-tooltip.js у заголовок. Додавання цього коду у колонтитулі працює для мене! але коли я додаю той самий код у заголовок, він не працює!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

3
У цьому випадку DOM ще не завантажився, тому всі елементи не існують на сторінці. Загорніть код вище в$(function() { ... });
johnml

3

Якщо використовувати Rails + Haml набагато простіше включити підказку, просто зробіть:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

Це просто додати наступний рядок в кінці елемента.

:rel => "tooltip", :title => "Referential Guide"

Дуже сподівався, що буде працювати для мене, але, на жаль, це не відбулося.
турболаден

Тепер я більше впадаю в Djanto, ніж Rails, але якщо ви вставите свій код, я можу спробувати дати вам підказку.
Андрес Калле

3

У моєму конкретному випадку це не спрацювало, тому що я включав дві версії jQuery. Один для завантажувальної програми, а інший (інша версія) для Google Charts.

Коли я видаляю завантаження jQuery для діаграм, воно працює добре.


3

Я щойно додав:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

нижче bootstrap.min.js, і він працює.


3

Давайте використаємо приклад, щоб показати, як підказки можна додавати до будь-якого елемента 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>

2

Якщо ви створюєте html, який містить підказку з javascript, а потім вставляючи його в документ, вам потрібно активувати popover / tooltip ПІСЛЯ ви вставили html в документ, а не під час завантаження документа ...


2

Ви повинні помістити підказку javascript після html. подобається це :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script> 

Або скористайтеся $ (документом). Вже:

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

Підказка не працює, тому що ви ставите html підказки перед javascript , тому вони не знають, чи існує JavaScript для підказки. На мою думку, сценарій читається зверху вниз.


2

У мене була подібна проблема, і особливо якщо ви працюєте в контейнері з кнопками, як контейнер з вертикальною кнопкою. У такому випадку потрібно встановити контейнер як "тіло"

I have added a jsfiddle example

приклад



1

З завантажувальних документів на підказках

Підказки підключаються з міркувань продуктивності, тому їх потрібно ініціалізувати самостійно. Один із способів ініціалізації всіх підказок на сторінці - це виділення їх за атрибутом перемикання даних:

  $('[data-toggle="tooltip"]').tooltip()

0

Додайте data-toggle="tooltip"всі потрібні елементи за допомогою підказки.


0

Вам потрібно зробити наступне. Додайте

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

код десь на вашій сторінці (бажано в <head>розділі).

Також додайте data-toggle: "tooltip"все, що ви хочете включити за допомогою нього.


0

ви можете використовувати Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

І виклик функції підказки:

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

-2

Швидка та легша альтернатива плагіну підказки Bootstrap:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
}); 

Мітка / текст повинен бути укладений в обгортку класу "mytooltip". Ця обгортка повинна мати ідентифікаційний номер.

Після мітки з'являється текст підказки інструменту, загорнутий у діві класу "mytooltiptext" та id, що складається з ідентифікатора батьківської обгортки + "_tttext". Можуть бути використані інші параметри для селекторів.

Сподіваюся, це допомагає.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.