підказки для кнопки


292

Чи можливо створити підказку для кнопки html. Це звичайна кнопка HTML, а атрибут заголовка відсутній, як і для деяких елементів керування html. Будь-які думки чи коментарі?

Відповіді:


559

Просто додайте titleдо свого button.

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


9
@EduardLuca, У моєму випадку підказка дійсно не працює на disabledкнопках, оскільки Bootstrap встановлює pointer-events: noneдля відключеного стану. Він повинен працювати, якщо встановити його pointer-events: autoбезпосередньо на елемент.
Віталій Алекаськ

це також те, що підказка має на меті показати знизу, де знаходиться миша. Отже, якщо цільовий елемент знаходиться в правій нижній частині екрана, то підказка перебирається по вказівнику миші. Більш загально: позиція наконечника часом не розумна ... але, мабуть, тоді це лише браузери.
Гідеон

1
Бувають ситуації, коли підказки потрібні , але важливо враховувати вашу базу даних під час використання методу в цій відповіді. Я використовував titleатрибут для показу комбінації клавіш для кнопки, оскільки ярлики не потрібні та торкатися лише пристроїв, які не використовують клавіатури.
Дейв Ф

але це не показує підказку, коли ви використовуєте клавіатуру для фокусування кнопки, будь-який інший трюк, щоб впоратися з цим? Я думаю, це питання доступності, ні?
Nikhil



12

Використовуйте titleатрибут. Це стандартний атрибут HTML і за замовчуванням відображається підказками більшості браузерів настільних ПК.


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

3
@isaacweathers Ну, як би ви "хотіли" в мобільному браузері, як би там не було, щоб переглянути назву?
mbomb007

@ mbomb007 -: стан фокусування на iOS з озвучуванням приблизно наближається до: атрибута наведення курсора, як ви могли отримати.
isaac погоди


10

Для всіх, хто шукає шаленого рішення , просто спробуйте

title="your-tooltip-here"

в будь-якому тезі . Я перевірив td's і a' s, і це досить добре працює.


2
@krillgar, я дав загальне рішення, яке працює не тільки з кнопками, але й з іншими тегами. Мій намір підкріпив цю можливість.
Девідсон Ліма

3
щодо Вашого останнього коментаря, це вже те, що відповідь Skyman говорила років тому.
Pac0

2

Кнопка приймає атрибут "title". Потім ви можете призначити йому значення, яке ви хочете, щоб ярлик з'явився, коли ви наводить курсор миші на кнопку.

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


1

Атрибут заголовка призначений для отримання додаткової інформації. Це не корисно для 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" />

Атрибут заголовка буде підказкою інструмента, але він буде контролюватися браузером, наскільки він відображається і як він виглядає. Якщо ви хочете більше контролю, є сторонні параметри jQuery, багато шаблонів css, таких як Bootstrap, мають вбудовані рішення, і ви також можете написати просте рішення css, якщо хочете. перегляньте це рішення для w3schools .


-1

Ви повинні використовувати як атрибути title, так і alt, щоб він працював у всіх браузерах.

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

1
Навіщо використовувати обоє?
Андрій Чьоара

бо деякі браузери використовують атрибут alt, а якийсь заголовок
Сергій Гурін

5
Дурниці. altАтрибут дійсний тільки img, input type="image"і areaтеги.
бітбітдекер
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.