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

292

Можно ли создать всплывающую подсказку для кнопки HTML. Это обычная кнопка HTML, и там нет атрибута «Заголовок», как для некоторых элементов управления HTML. Есть мысли или комментарии?

Saravan
источник

Ответы:

559

Просто добавьте titleк себе button.

<button title="Hello World!">Sample Button</button>

Муад'Диб
источник
9
@EduardLuca, в моем случае всплывающая подсказка действительно не работает с disabledкнопками, потому что Bootstrap устанавливает pointer-events: noneдля отключенного состояния. Должно работать, если установлено pointer-events: autoпрямо на элемент.
Виталий Алекаск
Кроме того, подсказка будет направлена ​​на то, чтобы показать дно от того места, где находится мышь. Поэтому, если целевой элемент находится в правом нижнем углу экрана, всплывающая подсказка перемещается по указателю мыши. В более общем плане: положение подсказки иногда не очень разумно ... но я полагаю, что это только браузеры.
Гидеон
1
Есть ситуации, когда нужны всплывающие подсказки , но важно учитывать вашу базу пользователей при использовании метода в этом ответе. Я использовал titleатрибут для отображения сочетания клавиш для кнопки, потому что сочетания клавиш не нужны и устройства, работающие только на сенсорных устройствах, не используют клавиатуры.
Дэйв Ф
но это не показывает всплывающую подсказку, когда вы используете клавиатуру, чтобы сфокусировать кнопку, любой другой прием, чтобы справиться с этим? Я думаю, это проблема доступности, нет?
Нихил
Ссылка: HTML Living Standard 3.2.6.1 Атрибут title .
Людовик Куты
43

и <button>пометить и <input type="button">принять атрибут заголовка ..

Габриэле Петриоли
источник
Как насчет простых ссылок HTML с использованием <a>и href?
Аарон Франке
1
Теги @AaronFranke yes, aа также все теги поддерживают titleатрибут. См developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Gabriele Petrioli
12

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

летчик
источник
Проблема, которую я читаю, подчеркивает, что атрибут title не полностью поддерживается многими мобильными браузерами. В настоящее время я также исследую это для некоторых проблем ADA, и это, кажется, только несколько поддержано.
Исаак погода
3
@isaacweathers Ну, как бы вы «парили» в мобильном браузере, чтобы просмотреть заголовок?
mbomb007
@ mbomb007 -: состояние фокуса на iOS с передачей голоса примерно такое же, как и у атрибута hover.
Исаак погода
10

Для всех, кто ищет сумасшедшее решение , просто попробуйте

title="your-tooltip-here"

в любом теге . Я проверил в td's и a' s, и это довольно хорошо работает.

Дэвидсон Лима
источник
2
@krillgar, я дал общее решение, которое работает не только с кнопками, но и с другими тегами. Мое намерение было укрепить эту возможность.
Дэвидсон Лима
3
Что касается вашего последнего комментария, это уже то, что ответ Skyman говорил годы назад.
Pac0
2

Кнопка принимает атрибут title. Затем вы можете присвоить ему значение, которое вы хотите, чтобы метка появлялась, когда вы наводите курсор мыши на кнопку.

<button type="submit" title="Login">
Login</button>

Феликс Уррутиа
источник
1

Атрибут title предназначен для предоставления дополнительной информации. Для SEO это бесполезно, поэтому никогда не стоит иметь один и тот же текст в заголовке и alt, который предназначен для описания изображения или ввода по сравнению с тем, что он делает. например:

<button title="prints out hello world">Sample Buttons</button>

<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />

Атрибут title создаст всплывающую подсказку, но браузер будет контролировать, насколько он будет отображаться и как он выглядит. Если вы хотите больше контроля, есть сторонние опции jQuery, многие шаблоны CSS, такие как Bootstrap, имеют встроенные решения, и вы также можете написать простое решение CSS, если хотите. проверить это решение w3schools .

AU Crawford
источник
-1

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

<button title="Hello World!" alt="Hello World!">Sample Button</button>
Сергей Гурин
источник
1
Почему вы должны использовать оба?
Андрей
потому что какой-то браузер использует атрибут alt, а какой-то заголовок
Сергей Гурин
5
Ерунда. altАтрибут действителен только img, input type="image"и areaтеги.
bitbitdecker