Не работает tooltip bootstrap: Почему не работает tooltip на сайте от Bootstrap? — Хабр Q&A

Подсказки · Bootstrap на русском

Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.

Содержание

Обзор

Что нужно знать при использовании плагин всплывающей подсказки:

• Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
• Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
• Подсказки с нулевой длины названия не отображаются.
• Укажите container: 'body' чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.).
• Вызывая подсказки на скрытые элементы не будут работать.
• Подсказки для .disabled или disabled элементы должны быть вызваны на элемент оболочки.
• При срабатывании из гиперссылок, которые охватывают несколько строк, подсказки будут центрироваться. Используйте white-space: nowrap; на <a>, чтобы избежать этого поведения.

Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.

Одним из способов инициализации все подсказки на странице будет выбрать их data-toggle атрибута:

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

Примеры

Наведите курсор на ссылки ниже, чтобы посмотреть подсказки:

Статические демо

Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.

Интерактивная демо-версия

Наведите курсор на подписи, чтобы увидеть подсказки.

<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Использование

Плагин всплывающей подсказки генерирует контент и разметки по требованию, а по умолчанию места подсказки после запуска элемента.

Вызвать подсказку через JavaScript:

$('#example').tooltip(options)

Разметки

Требуемая разметка для подсказки только data атрибут title на HTML элемент, который вы хотите иметь подсказку. Созданный разметки подсказки достаточно проста, хотя и требует установки (по умолчанию значение top плагином).

Делая подсказки для работы клавиатуры и пользователей ассистивных технологий

Следует только добавить всплывающие подсказки для элементов HTML, которые традиционно клавиатурой и интерактивным (например, ссылки или элементы управления формы). Хотя произвольный HTML-элементы (такие как <span>) может быть сделан фокус на добавление tabindex="0" атрибута, это может Добавить закладку раздражает и смущает останавливается на неинтерактивные элементы для пользователей клавиатуры. Кроме того, большинство технологий, в настоящее время не озвучит подсказки в этой ситуации.

<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Сгенерированной разметке плагин -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-animation="".

Атрибуты данных для отдельных подсказки

Варианты индивидуальных подсказки также может быть задан с помощью атрибутов данных, как описано выше.

Методы

$().tooltip(options)

Присоединяет обработчик подсказки к коллекции элементов.

.tooltip('show')

Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip события). Это считается “ручного” срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.

$('#element').tooltip('show')

.tooltip('hide')

Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.

$('#element').tooltip('hide')

.tooltip('toggle')

Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip или hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.

$('#element').tooltip('toggle')

.tooltip('dispose')

Скрывает и уничтожает всплывающей подсказки элемента. Подсказки, что использовать делегирование (которые создаются с помощью selector опция) не может быть индивидуально уничтожен потомок триггерных элементов.

$('#element').tooltip('dispose')

События

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделать что-то...
})

Tooltip CSS уроки для начинающих академия

Создание всплывающих подсказок с помощью CSS.

Демонстрация: примеры подсказок

Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент:

Базовая подсказка

Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:

Пример

/* Tooltip container */
.tooltip {
    position: relative;
   
display: inline-block;
    border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}

/* Tooltip text
*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
   
background-color: black;
    color: #fff;
   
text-align: center;
    padding: 5px 0;
   
border-radius: 6px;
 
   
/* Position the tooltip text — see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
    visibility: visible;
}
</style>

<div>Hover
over me
  <span>Tooltip
text</span>
</div>

Пример объяснено

HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip" . Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.

Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip использует position:relative , который необходим для размещения текста подсказки ( position:absolute ).
Примечание: Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptext содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.

Свойство CSS border-radius используется для добавления скругленных углов в текст подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с class="tooltip" .

Размещение всплывающих подсказок

В этом примере подсказка помещается справа ( left:105% ) «парящего» текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине его элемента контейнера.
Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.

Подсказка справа

.tooltip .tooltiptext {
    top: -5px;
   
left:
105%;
}

Result:

Hover over me
Tooltip text

Левая подсказка

.tooltip .tooltiptext {
    top: -5px;
   
right:
105%;
}

Result:

Hover over me
Tooltip text

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
    width: 120px;
   
bottom: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text

Нижняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text

Стрелки подсказки

Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after вместе со свойством content . Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 100%;
/* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: black transparent transparent transparent;
}

Result:

Hover over me
Tooltip text

Пример объяснено

Поместите стрелку в подсказку: top: 100% будет размещать стрелку в нижней части всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. При изменении этого параметра также измените значение margin-left. Это будет держать стрелку в центре.

border-color используется для преобразования содержимого в стрелку. Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.

В этом примере демонстрируется добавление стрелки в верхнюю часть всплывающей подсказки.
Обратите внимание, что на этот раз мы установили нижний цвет границы:

Верхняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent black transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку слева от подсказки:

Стрелка влево

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
top: 50%;
    right: 100%; /* To the left of the tooltip
*/
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent black transparent transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку справа от подсказки:

Стрелка вправо

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the
tooltip */
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent transparent black;
}

Result:

Hover over me
Tooltip text

Исчезать в подсказках (анимация)

Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition свойство вместе с opacity свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :

Пример

.tooltip .tooltiptext {
    opacity: 0;
   
transition: opacity 1s;
}

.tooltip:hover
.tooltiptext {
    opacity: 1;
}

Использование атрибута aria-describedby — Доступность

Описание

Атрибут aria-describedby используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на aria-labelledby: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.

Атрибут aria-describedby используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе Examples ниже приведено больше информации о том как использовать атрибут в этих случаях.

Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена  ARIA role .

Значение

разделенный пробелами список ID элементов

Возможные последствия для пользовательских агентов и вспомогательных технологийP

Примечание: Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.

Примеры

Пример 1: Связвание приложения и описания

В примере ниже, вводный параграф описывает приложение календаря. aria-describedby используется для связывания параграфа с контейнером приложения.

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h2>Calendar</h2>
    <p>
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>

Пример 2: Кнопка закрытия

В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.

<button aria-label="Close" aria-describedby="descriptionClose"
   >X</button>

...

<div>Closing this window will discard any information entered and
return you back to the main page</div>

Рабочие примеры:

Примечания

• Атрибут aria-describedby не предназначен для ссылки, описывающей внешний ресурс — так как это ID, он должен ссылаться на элемент в том же документе  DOM.

Использование ARIA ролей

все элементы базовой разметки

Связанные ARIA методы

Совместимость

Дополнительные ресурсы

javascript — всплывающая подсказка Bootstrap не работает в моем веб-проекте

На самом деле я нахожусь в очень странной ситуации и почему-то не могу понять, что со мной происходит. Ситуация заключается в том, что я на самом деле отлично реализую свою всплывающую подсказку для начальной загрузки, и я проверил ее на JsFiddle , он тоже работает нормально, однако после многих усилий он не реализуется в веб-проекте, я не не знаю почему.

Это буквально очень странно.Вот моя реализация, которая отлично работает с JsFiddle.

  

  
    
    

    
    

    
    
    
    
    
  
  
     <раздел>
      

        
 Легкость 

 каждому дому 
        
Подсказка внизу

        
 
      
    
    

А для решений я много чего сделал, но, к сожалению, все не сработало.

1. С учетом названия класса

2. Чтобы использовать элемент body для нацеливания на переключатель данных:

3. Чтобы использовать контейнер как тело и сфокусироваться на секции:

Это то, что я получаю в своем веб-проекте:

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

РЕДАКТИРОВАТЬ

Я проверил консоль и получил сообщение об ошибке .всплывающая подсказка не является функцией :

Всплывающие подсказки · Bootstrap

Документация и примеры для добавления пользовательских всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранилища заголовков.

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

• Всплывающие подсказки полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед загрузкой.js или используйте bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js, чтобы всплывающие подсказки работали!
• Если вы создаете наш JavaScript из исходного кода, для него требуется util.js .
• Всплывающие подсказки включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
• Укажите контейнер : 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т. Д.).
• Всплывающие подсказки для скрытых элементов не работают.
• Всплывающие подсказки для .disabled или disabled элементов должны запускаться для элемента оболочки.
• При запуске из гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы. Используйте пробел : nowrap; на ваших s, чтобы избежать такого поведения.
• Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.

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

  
  Всплывающая подсказка вверху


  Подсказка справа


  Подсказка внизу


  Подсказка слева
  

  
  Всплывающая подсказка с HTML
  

  $ ('# example'). Tooltip (параметры)  

  $ ('# пример').всплывающая подсказка ({граница: 'окно'})  

  
 Наведите указатель мыши на меня 



  
 
  

    Текст всплывающей подсказки!
  
  

Отключенные элементы

Элементы с отключенным атрибутом не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно).В качестве обходного пути вы захотите вызвать всплывающую подсказку из оболочки

  $ ('# element'). Tooltip ('show')  

  $ ('# element'). Tooltip ('hide')  

  $ ('# element'). Tooltip ('toggle')  

  $ ('# element'). Tooltip ('dispose')  

  $ ('# element'). Tooltip ('enable')  

  $ ('# element'). Tooltip ('disable')  

  $ ('# element'). Tooltip ('toggleEnabled')  

  $ ('# element'). Tooltip ('update')  

  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  

  
  Одиночный переключатель
  

  

  <метка>
     Флажок 1 (предварительно установлен)
  
  <метка>
     Флажок 2
  
  <метка>
     Флажок 3
  
  

  

  <метка>
     Радио 1 (предварительно выбрано)
  
  <метка>
     Радио 2
  
  <метка>
     Радио 3
  
  

  
  ...


<сценарий>
  $ ('# myStateButton'). on ('щелчок', function () {
    $ (this) .button ('complete') // текст кнопки будет "готово!"
  })
  

  
  Ссылка на href


  Кнопка с целью данных


  

    ...
  
  

  

  

    

      

        

          Складной групповой элемент №1
        
      
    
    

      

        Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
    
  
  

    

      

        

          Элемент складной группы №2
        
      
    
    

      

        Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
    
  
  

    

      

        

          Элемент складной группы №3
        
      
    
    

      

        Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
    
  
  

  $ ('.коллапс '). коллапс ()  

  $ ('# myCollapsible').крах({
  toggle: false
})  

  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь…
})  

  

  
  

    
 
    
 
    
 
  

  
  

    

      
      

        ...
      
    
    

      
      

        ...
      
    
    ...
  

  
  
     
     Предыдущий 
  
  
     
     Далее 
  
  

  

  
  

    
 ... 
    
 ... 
  
  

  $ ('. Карусель'). Карусель ()  

  $ ('. Carousel'). Carousel ({
  интервал: 2000
})  

  $ ('# myCarousel'). On ('slide.bs.carousel', function () {
  // сделай что-нибудь…
})  

  

  ...
  

  $ ('# myAffix').affix ({
  компенсировать: {
    верх: 100,
    внизу: function () {
      return (this.bottom = $ ('. footer'). outerHeight (true))
    }
  }
})  

  $ ('# myAffix'). Affix ({
  смещение: 15
})  

  $ ('# myAffix'). Affix ('checkPosition')