Tooltips for Button elements

Question

Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?

score 760 · Accepted Answer · edited Jan 05 '17 at 23:10

760

Simply add a title to your button.

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

edited Jan 05 '17 at 23:10

Urda

5,460
5
34
47

answered Feb 10 '10 at 16:06

Muad'Dib

28,542
5
55
68

14

@EduardLuca, In my case tooltip really does no work on `disabled` buttons because Bootstrap sets `pointer-events: none` for disabled state. It should work if set `pointer-events: auto` directly to the element. – Vitalii Alekask Sep 07 '16 at 09:45
it's also that, the tooltip will aim to show bottom from where the mouse is. So if the target element is on the bottom right of the screen then the tooltip scrambles over the mouse pointer. More generally: the position of the tip isn't smart sometimes... but I guess that's just the browsers then. – gideon Jul 21 '17 at 06:21
1

[There are situations where tooltips are necessary](https://inclusive-components.design/tooltips-toggletips/#acasefortooltips), but [it is important to consider your userbase](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#Accessibility_concerns) when using the method in this answer. I used the `title` attribute for showing a keyboard shortcut for a button because shortcuts aren't necessary and touch only devices don't use keyboards. – Dave F Jun 02 '18 at 17:54
but this doesn't show tooltip when you use keyboard to focus the button, any other trick to handle this? I guess this is accessibility issue, no? – Nikhil Oct 04 '18 at 13:31
Reference: [HTML Living Standard 3.2.6.1 The title attribute](https://html.spec.whatwg.org/multipage/dom.html#attr-title). – Ludovic Kuty May 26 '20 at 08:20

score 49 · Answer 2 · answered Feb 10 '10 at 16:03

49

both <button> tag and <input type="button"> accept a title attribute..

answered Feb 10 '10 at 16:03

Gabriele Petrioli

191,379
34
261
317

1

What about for plain HTML links using `` and `href`? – Aaron Franke Jan 06 '19 at 04:39
3

@AaronFranke yes `a` tags as well as all tags support the `title` attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes – Gabriele Petrioli Jan 06 '19 at 10:06

skyman · Answer 3 · 2019-11-27T15:18:11.913

33

Use title attribute. It is a standard HTML attribute and is by default rendered in a tooltip by most desktop browsers.

edited Nov 27 '19 at 15:18

answered Feb 10 '10 at 16:03

skyman

2,422
17
16

The issue that I am reading though highlights that the title attribute is not fully supported by many mobile browsers. I'm currently researching this as well for some ADA issues and it seems to be only somewhat supported. – isaac weathers Aug 31 '14 at 05:45
3

@isaacweathers Well, how would you "hover" in a mobile browser, anyway, in order to view the title? – mbomb007 Feb 26 '16 at 21:27
@mbomb007 -- :focus state on iOS with voiceover is about as close to :hover attribute as you could get. – isaac weathers Apr 08 '16 at 17:32
[Links are fantastic, but they should never be the only piece of information in your answer. When someone goes on Stack Exchange, the question "answer" should actually contain an answer. Not just a bunch of directions towards the answer.](https://meta.stackexchange.com/a/8259/171858) – Erik Philips Nov 26 '19 at 23:04

score 20 · Answer 4 · answered Dec 19 '19 at 23:03

20

A button accepts a "title" attribute. You can then assign it the value you want to make a label appear when you hover the mouse over the button.

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

answered Dec 19 '19 at 23:03

Félix Urrutia

211
2
3

what does the title here? – Aalexander Jan 03 '21 at 19:10

score 14 · Answer 5 · edited Aug 24 '18 at 11:08

14

For everyone here seeking a crazy solution, just simply try

title="your-tooltip-here"

in any tag. I've tested into td's and a's and it pretty works.

edited Aug 24 '18 at 11:08

Pac0

21,465
8
65
74

answered Mar 06 '17 at 13:49

Davidson Lima

788
9
17

2

@krillgar, I gave a general solution that works not only with _button_ but other tags. My intention was reinforce this possibility. – Davidson Lima Mar 30 '17 at 15:55
4

regarding your last comment, it's already what skyman's answer was saying years ago. – Pac0 Aug 24 '18 at 11:08

score 2 · Answer 6 · answered Oct 28 '19 at 22:23

The title attribute is meant to give more information. It's not useful for SEO so it's never a good idea to have the same text in the title and alt which is meant to describe the image or input is vs. what it does. for instance:

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

The title attribute will make a tool tip, but it will be controlled by the browser as far as where it shows up and what it looks like. If you want more control there are third party jQuery options, many css templates such as Bootstrap have built in solutions, and you can also write a simple css solution if you want. check out this w3schools solution.

score 1 · Answer 7 · answered Jul 08 '20 at 08:25

1

If your button still doesn't show anything with title, check if your button is NOT disabled

answered Jul 08 '20 at 08:25

Eugene Ihnatsyeu

1,299
13
15

Sergey Gurin · Answer 8 · 2018-11-19T12:38:30.490

-2

You should use both title and alt attributes to make it work in all browsers.

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

edited Nov 19 '18 at 12:38

answered Nov 19 '18 at 11:00

Sergey Gurin

1,537
15
14

3

Why should you use both? – Andrei Cioara Mar 31 '19 at 20:14
because some browser use alt attribute and some title – Sergey Gurin May 17 '19 at 20:13
13

Nonsense. The `alt` attribute is only valid for `img`, `input type="image"` and `area` tags. – Christoph Bach Jun 04 '19 at 16:06

Tooltips for Button elements

8 Answers8

Linked

Related