etykietki dla przycisku

292

Czy można utworzyć etykietkę przycisku HTML. Jest to zwykły przycisk HTML i nie ma atrybutu Tytuł, ponieważ istnieje on dla niektórych formantów HTML. Wszelkie myśli lub komentarze?

SARAVAN
źródło

Odpowiedzi:

559

Po prostu dodaj titledo swojego button.

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

Muad'Dib
źródło
9
@EduardLuca, W moim przypadku podpowiedź naprawdę nie działa na disabledprzyciskach, ponieważ Bootstrap ustawia się pointer-events: nonena stan wyłączony. Powinno działać, jeśli zostanie ustawione pointer-events: autobezpośrednio na element.
Vitaliy Alekask,
to także, że podpowiedź będzie miała na celu pokazanie dna, z którego znajduje się mysz. Jeśli więc element docelowy znajduje się w prawym dolnym rogu ekranu, etykieta narzędzia przesuwa się nad wskaźnikiem myszy. Mówiąc bardziej ogólnie: pozycja końcówki czasami nie jest inteligentna ... ale sądzę, że to tylko przeglądarki.
gideon
1
Są sytuacje, w których potrzebne są podpowiedzi , ale ważne jest, aby wziąć pod uwagę bazę użytkowników , korzystając z metody opisanej w tej odpowiedzi. Użyłem tego titleatrybutu do pokazania skrótu klawiaturowego dla przycisku, ponieważ skróty nie są konieczne i tylko urządzenia dotykowe nie używają klawiatury.
Dave F
ale to nie pokazuje podpowiedzi, kiedy używasz klawiatury, aby ustawić ostrość na przycisku, czy jest jakaś inna sztuczka, aby sobie z tym poradzić? Myślę, że to jest problem z dostępnością, nie?
Nikhil
Odniesienie: HTML Living Standard 3.2.6.1 Atrybut tytułu .
Ludovic Kuty
42

oba <button>znaczniki i <input type="button">zaakceptuj atrybut tytułu.

Gabriele Petrioli
źródło
A co z zwykłymi linkami HTML używającymi <a>i href?
Aaron Franke,
1
@AaronFranke tak atagi, a także wszystkie tagi obsługują ten titleatrybut. Zobacz developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Gabriele Petrioli
12

Użyj titleatrybutu. Jest to standardowy atrybut HTML i domyślnie jest renderowany w podpowiedzi przez większość przeglądarek na komputery.

skyman
źródło
Problem, który czytam, podkreśla jednak, że atrybut title nie jest w pełni obsługiwany przez wiele przeglądarek mobilnych. Obecnie badam to również w związku z niektórymi problemami ADA i wydaje się, że jest to w pewnym stopniu obsługiwane.
Isaac wietrza
3
@isaacweathers Cóż, jak byś „unosił się” w przeglądarce mobilnej, aby wyświetlić tytuł?
mbomb007
@ mbomb007 -: stan skupienia na iOS z lektorem jest tak blisko atrybutu: najechanie, jak tylko możesz.
Pogoda w Iaac
10

Dla wszystkich, którzy szukają szalonego rozwiązania , po prostu spróbuj

title="your-tooltip-here"

w dowolnym tagu . Przetestowałem na td„i a” i to całkiem działa.

Davidson Lima
źródło
2
@ krillgar, podałem ogólne rozwiązanie, które działa nie tylko z przyciskiem, ale i innymi tagami. Moim zamiarem było wzmocnienie tej możliwości.
Davidson Lima
3
co do twojego ostatniego komentarza, to już była odpowiedź Skymana lata temu.
Pac0,
2

Przycisk akceptuje atrybut „tytuł”. Następnie możesz przypisać mu wartość, która ma się pojawiać, gdy najedziesz myszką na przycisk.

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

Félix Urrutia
źródło
1

Atrybut tytułu ma na celu dać więcej informacji. To nie jest przydatne dla SEO, więc nigdy nie jest dobrym pomysłem mieć ten sam tekst w tytule i alt, który ma opisywać obraz lub dane wejściowe w porównaniu do tego, co robi. na przykład:

<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" />

Atrybut tytułu utworzy podpowiedź, ale będzie kontrolowany przez przeglądarkę tak daleko, jak się pojawi i jak będzie wyglądać. Jeśli chcesz mieć większą kontrolę, istnieją opcje jQuery innych firm, wiele szablonów css, takich jak Bootstrap, ma wbudowane rozwiązania, a także możesz napisać proste rozwiązanie css, jeśli chcesz. sprawdź to rozwiązanie w3schools .

AU Crawford
źródło
-1

Powinieneś użyć zarówno atrybutu title, jak i alt, aby działał we wszystkich przeglądarkach.

<button title="Hello World!" alt="Hello World!">Sample Button</button>
Siergiej Gurin
źródło
1
Dlaczego powinieneś używać obu?
Andrei Cioara,
ponieważ niektóre przeglądarki używają atrybutu alt i jakiegoś tytułu
Sergey Gurin
5
Nonsens. altAtrybut jest ważny tylko dla img, input type="image"i areaznaczniki.
bitbitdecker