Не работает всплывающая подсказка html

Почему не работает всплывающая подсказка?

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

Всплывающая подсказка
Здравствуйте! Подскажите. пожалуйста, как реализовать всплывающую подсказку которая открывает в.

Всплывающая подсказка на js
Испробовал css стили для всплывающих подсказок как на сайте.

Самодельная всплывающая подсказка неработает
Уровень автора:любитель; Изменил мою подсказу всплывающую,решил что таких будет много на.

Всплывающая подсказка в виде img
Помогите подправить скрипт. Данный Скрипт выводит подсказки при наведении курсора, Подсказка в виде.

у вас нет самой подсказки, т.е. всплывать просто нечему
у вас нет тега, на который надо наводить курсор мыши, чтобы подсказка всплывала

в общем, всё это выбрасывайте — исправить это невозможно в принципе

погуглите Tooltip — найдёте сотни (и даже тысячи) нормально работающих кодов

Что это? Вы тестировали? Работает?

Добавлено через 3 минуты

В том то и дело, что примеров нормальных в инете не находится. Уже 3 часа гуглю в поисках кода. Сам в JS не силен. Мне надо только оформить всплывающую подсказку. Замучился уже. Вот вроде подходящий код, а вы говорите, что плохой.

И еще в инете в основном находятся сложные коды, а мне надо чтоб наипростейший был. Чтоб было ясно два плюс два. А не часами разбирать, что к чему.

надеюсь, увернуться успели?

а то попадёт такой «осколочек», станете Каем, придётся вам своей спасительницы-Герды дожидаться, и вдруг попадётся не волшебница, а такая, которая «только учус»?

чтобы сделать всплывающую подсказку, вам надо иметь 3 (три) кода
1) HTML-код, в котором будут выделен как текст, при наведении на который будет всплывать подсказка, так и текст самой подсказки

2) CSS-код, который установит внешний вид как текста, при наведении на который будет всплывать подсказка, так и самой подсказки

3) и только потом, в самом конце, вам нужен будет JS-код

Так как в JS вы новичок, сделайте сами хотя бы два первых кода
подсказываю:

в HTML-коде должна быть хоть одна пара двух подряд идущих тегов
текст, при наведении курсора на который будет всплывать подсказка

в CSS-коде должны быть прописаны правила стиля для двух классов
.HV <> /*для текста, по наведению на который должна всплывать подсказка (цвет, подчёркивание, вид курсора) */
.TT <> /*для подсказки (ширина высота, внутренние отступы, цвет фона, граница, с радиусами или без них) */

Ну и, когда вы ещё напишете мне:
— на каком расстоянии (в пикселях) от верхнего края текста должна появиться нижняя грань подсказки
— на каком расстоянии (в пикселях) от начала текста должна находиться левая грань подсказки
вот тогда я и помогу вам со скриптом

Источник

Как делается в html всплывающая подсказка?

Дата публикации: 2016-10-20

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

Стандартная подсказка

По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.

В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:

Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.

Способ 2. Чистый css и плавное появление

Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.

Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах

Все права защищены © 2021
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Источник

Всплывающие подсказки Bootstrap Tooltips для сайта

В этой статье познакомимся с процессом создания всплывающих подсказок на фреймворке Bootstrap 3 и 4 версиях.

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

Всплывающая подсказка – это блок с некоторой информацией, появляющейся возле элемента при наведении на него курсора. Tooltips в Bootstrap могут быть добавлены к любым HTML элементам: img (изображениям), a (ссылкам), span и др.

В Bootstrap 3 и 4 компонент Tooltips построен как с использованием стилей, так и кода на JavaScript.

Позиционирование всплывающей подсказки возле элемента в Bootstrap 3 осуществлялось собственным кодом. В Bootstrap 4 эта ситуация изменилась, теперь это осуществляется с использованием сторонней библиотеки «popper.js». Это означает что файл «bootstrap.js» зависит от «popper.js» и его нужно подключить перед ним.

Кроме этого варианта, можно ещё воспользоваться одним файлом «bootstrap.bundle.js». Данный файл включает уже включает в себя библиотеку «popper.js».

При самостоятельной сборке JavaScript из исходных кодов Bootstrap 4, для работы компонента Tooltips необходимо кроме файла «tooltips.js» в проект ещё включить «utils.js».

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

Перед тем как переходить к созданию всплывающих подсказок для элементов необходимо рассмотреть некоторые особенности работы с ними:

1. Всплывающие подсказки по соображениям производительности автоматически не инициализируются . Действие по инициализации необходимо выполнить дополнительно , например, после загрузки страницы.
2. Всплывающие подсказки с пустым содержимым не отображаются.
3. Установите параметру container значение body чтобы избежать проблем рендеринга этого компонента в более сложных компонентах (например, в input или button группах). В Bootstrap 4 данное значение параметр container имеет по умолчанию.
4. Всплывающие подсказки на скрытых элементах не работают.
5. Всплывающая подсказка для не активного элемента (т.е. имеющего класс disabled или атрибут disabled ) должна вызываться на его родителе.
6. При вызове Tooltips на гиперссылках, которые состоят из нескольких строк, всплывающие подсказки будут центрироваться. Используйте white-space: nowrap на элементе a , чтобы отключить такое поведение.
7. Всплывающие подсказки должны быть скрыты перед удалением соответствующих элементов из DOM.

Создание всплывающей подсказки осуществляется посредством добавления к HTML-элементу атрибута title с необходимым сообщением.

После этого, чтобы всплывающая подсказка работала, её необходимо инициализировать.

Для этого нужно прописать в скрипт следующий код:

В этом примере выбор элемента для которого нужно показывать tooltip осуществлялось по id .

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

Но если на странице много элементов, для которых нужно инициализировать всплывающую подсказку, то к ним нужно добавить какой-то опознавательный «знак», например, атрибут data-toggle=»tooltip» .

Затем в скрипте после загрузки DOM выбрать все эти элементы и вызвать для них метод tooltip .

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

В Bootstrap для настройки функциональности и поведения всплывающих подсказок имеются различные параметры. Их можно устанавливать как с помощью data-атрибутов, так и посредством JavaScript.

Список параметров компонента Tooltips:

• animation (тип: boolean ; значение по умолчанию: true ) – определяет необходимо ли процесс появления и скрытия всплывающей подсказки выполнять с анимацией.
• container (тип: string | element | false ; значение по умолчанию: false ) – определяет элемент, в который необходимо помещать код всплывающей подсказки. Например, если указать этому параметру значение «body», то код подсказки будет добавляться в конец содержимого элемента body . А если например, значение «#tooltip», то в элемент, id которого равно tooltip. По умолчанию, Bootstrap 3 помещает HTML-код tooltip после элемента, который вызвал эту подсказку, а Bootstrap 4 — в конец элемента body .
• delay (тип: number | object ; значение по умолчанию: 0 ) – устанавливает время задержки перед отображением и скрытием всплывающей подсказки в миллисекундах. Не работает с параметром trigger, которому установлено значение manual . При указании одного значения (числа), интервал задержки устанавливается одинаковым как перед отображением, так и перед скрытием. Для установки разного времени, значение параметра указывается в формате объекта. Например, delay: < show: 500, hide: 100 >. В этом случае пауза перед отображением будет 500 мс, а перед скрытием – 100 мс.
• html (тип: boolean ; значение по умолчанию: false ) – определяет можно ли в содержимом подсказки (tooltip) использовать HTML теги. Значение true данного параметра соответственно включает эту возможность, а false — отключает.
• placement (тип: string | function ; значение по умолчанию: «top» ) – позволяет настроить расположение всплывающей подсказки относительно элемента. Для установки доступны следующие значения: «auto», «top», «bottom», «left», «right». Значение auto предназначено для автоматического ориентирования подсказки. Кроме вышеприведённых значений для определения положения подсказки можно использовать функцию. Она получает 2 аргумента. В качестве первого аргумента — DOM-узел всплывающей подсказки, а в качестве второго — DOM-элемент, вызвавший её. В контексте функции ключевое слово this указывает на экземпляр tooltip.
• selector (тип: string | false ; значение по умолчанию: false ) – предназначен для инициализации подсказок у элементов, которые будут создаваться динамически после загрузки страницы.
  В качестве объекта, для которого необходимо вызвать данный метод ( tooltip ) нужно выбрать элемент, который всегда будет присутствовать на странице. В большинстве случаев, в качестве такого элемента выбирают document или body .
  В качестве значения этого параметра необходимо указать селектор , на основе которого будет осуществляться фильтрация потомков, для которых необходимо инициализировать подсказку.
• template (тип: string ; значение по умолчанию: ‘

Настройка всплывающих подсказок с помощью JavaScript осуществляется следующим образом:

Пример настройки расположения всплывающих подсказок, как с помощью data-атрибута, так и посредством JavaScript:

Пример, в котором установка расположения подсказки осуществляется с помощью функции:

Ссылка, при нажатии на которую отображается всплывающая подсказка, которая в свою очередь тоже содержит ссылки (в примере используются параметры title, placement, trigger, html):

Всплывающая подсказка, содержащая изображение (в примере используются параметры title, html):

Изменения шаблона всплывающей подсказки осуществляется с помощью параметра template:

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

Подсказка для элемента, имеющего состояние disabled

Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или span, и вызвать уже подсказку посредством этого элемента.

Методы плагина Tooltips

Методы плагина Tooltips приведены в таблице.

Имя	Описание
.tooltip(options)	Этот метод инициализирует для одного или множества выбранных элементов всплывающие подсказки с указанными параметрами.
.tooltip(‘show’)	Метод, который включает отображение всплывающей подсказки у элемента.
.tooltip(‘hide’)	Метод, который убирает отображение всплывающей подсказки у элемента.
.tooltip(‘toggle’)	Этот метод переключает отображение подсказки у элемента. Т.е. если подсказка отображается у элемента, то убирает её. А если она не отображается, то включает её.
.tooltip(‘destroy’)	Имеется только в Bootstrap 3. Этот метод убирает всплывающую подсказку у элемента и удаляет её.
.tooltip(‘enable’)	Имеется только в Bootstrap 4. Этот метод включает возможность показа всплывающий подсказки у элемента. Всплывающие подсказки включены по умолчанию.
.tooltip(‘disable’)	Имеется только в Bootstrap 4. Этот метод отключает возможность показа всплывающий подсказки у элемента. Для того чтобы снова включить возможность показа всплывающей подсказки у элемента, для него необходимо вызвать метод tooltip с параметром ‘enable’ или ‘toggleEnabled’.
.tooltip(‘toggleEnabled’)	Имеется только в Bootstrap 4. Метод переключает возможность показа всплывающий подсказки у элемента.
.tooltip(‘update’)	Имеется только в Bootstrap 4. Обновляет положение всплывающей подсказки у элемента.
.tooltip(‘dispose’)	Имеется только в Bootstrap 4. Этот метод убирает всплывающую подсказку у элемента и удаляет её.

Пример использование методов для управления всплывающими подсказками (Bootstrap 3):

Пример использование методов для управления всплывающими подсказками (Bootstrap 4):

События плагина Tooltips

JS Tooltips генерирует для всплывающих подсказок пять событий.

Имя	Описание
show.bs.tooltip	Событие возникает после вызова метода show() .
shown.bs.tooltip	Это событие генерируется, когда подсказка становится полностью видимой пользователю (после завершения CSS переходов).
hide.bs.tooltip	Событие возникает после вызова метода hide() .
hidden.bs.tooltip	Это событие генерируется, когда подсказка становится полностью скрытой от пользователя (после завершения CSS переходов).
inserted.bs.tooltip	Это событие вызывается после события show.bs.tooltip, когда шаблон подсказки будет добавлен в DOM.

Пример работы с событиями (при возникновении события выведем имя события, и время когда оно произошло):

Как изменить цвет и ширину подсказки с помощью CSS

Изменить некоторые параметры подсказки можно посредством переопределения её CSS-свойств.

Например, изменим цвет подсказки и её максимальную ширину (Bootstrap 4):

Источник