Questions tagged [tooltip]

Tooltips are a GUI (Graphical User Interface) element which typically pops up when the mouse pointer is hovering over an item in the GUI and provides some contextual information or clarification.

A tooltip is a small message, helping to understand the underlying content, often a button, a selection or link. It often appears after a certain amount of time, usually a few seconds, or while hovering over a certain area, and vanishes easily in order to not disturb too much.

Some visual examples of tooltips:

enter image description here

enter image description here enter image description here enter image description here

This video presents various flavors of tooltips.

7186 questions
125
votes
5 answers

How to add a tooltip to an svg graphic?

I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and…
nachocab
  • 13,328
  • 21
  • 91
  • 149
112
votes
10 answers

Multi-line tooltips in Java?

I'm trying to display tooltips in Java which may or may not be paragraph-length. How can I word-wrap long tooltips?
Amanda S
  • 3,266
  • 4
  • 33
  • 45
96
votes
9 answers

Is it possible to format an HTML tooltip (title attribute)?

Is it possible to format an HTML tooltip? E.g. I have a DIV with attribute title="foo!". When I have text-size of my browser zoomed in or out in, the text size of the tooltip remains unchanged. Is there a way to make the tooltip font scale with…
sunflowerpower
  • 1,305
  • 2
  • 10
  • 14
95
votes
2 answers

What is the easiest way to create an HTML mouseover tool tip?

What is the easiest, cleanest way to create an HTML mouseover tool tip without using JavaScript? mouse over that and have a a nice tooltip "We are Pennstate!"
stackoverflow
  • 18,348
  • 50
  • 129
  • 196
94
votes
6 answers

How can I add a hint or tooltip to a label in C# Winforms?

It seems that the Label has no Hint or ToolTip or Hovertext property. So what is the preferred method to show a hint, tooltip, or hover text when the Label is approached by the mouse?
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
91
votes
6 answers

How can I create a "tooltip tail" using pure CSS?

I just came across a neat CSS trick: HTML:
Cool Trick:

How do I get this effect with only CSS?
CSS: .tooltiptail { display:…
Hristo
  • 45,559
  • 65
  • 163
  • 230
90
votes
7 answers

How can I display a tooltip on an HTML "option" tag?

Either using plain HTML or jQuery assisted JavaScript, how do you display tooltips on individual
Metalshark
  • 8,194
  • 7
  • 34
  • 49
88
votes
12 answers

Tooltips for mobile browsers

I currently set the title attribute of some HTML if I want to provide more information:

An underline character is used here

Then in CSS: .more_info { border-bottom: 1px…
at.
  • 50,922
  • 104
  • 292
  • 461
85
votes
7 answers

bootstrap "tooltip" and "popover" add extra size in table

Note: Depending on you Bootstrap version (prior to 3.3 or not), you may need a different answer. Pay attention to the notes. When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How can I avoid…
mishka
  • 2,027
  • 2
  • 20
  • 30
83
votes
7 answers

HTML-Tooltip position relative to mouse pointer

How to align the tooltip the natural style: right bottom of the mouse pointer? Tooltip with Image