Stack Overflow
Stack Overflow

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
728
votes
25 answers

Add a tooltip to a div

I have a div tag like this:
How can I displaying a tooltip on :hover of the div, preferably with a fade in/out effect.
user475685
  • 8,041
  • 7
  • 26
  • 24
412
votes
8 answers

Tooltips for Button elements

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?
SARAVAN
  • 14,571
  • 16
  • 49
  • 70
384
votes
32 answers

How can I use a carriage return in a HTML tooltip?

I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip. To add the tip I'm using the title attribute. I've looked…
penderi
  • 8,673
  • 5
  • 45
  • 62
324
votes
3 answers

How to create a radial menu in CSS?

How do I create a menu which looks like so: Link to PSD I don't want to use the PSD images. I would prefer using icons from some package like FontAwesome and have the backgrounds/css generated in CSS. A version of the menu that is using the PSD to…
ssb
  • 7,422
  • 10
  • 36
  • 61
287
votes
18 answers

HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; }
Spiderman
  • 9,602
  • 13
  • 48
  • 56
257
votes
31 answers

Change Twitter Bootstrap Tooltip content on click

I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate the tooltip after…
rebellion
  • 6,628
  • 11
  • 48
  • 79
245
votes
10 answers

Display a tooltip over a button using Windows Forms

How can I display a tooltip over a button using Windows Forms?
Anonymous Cow
227
votes
26 answers

Add line break within tooltips

How can line breaks be added within a HTML tooltip? I tried using
and \n within the tooltip as follows: Hover me However, this was useless and I could see the…
Aakash Chakravarthy
  • 10,523
  • 18
  • 61
  • 78
188
votes
22 answers

How do you change the width and height of Twitter Bootstrap's tooltips?

I created a tooltip using Twitter Bootstrap. The tooltip is displaying with three lines. However, I would like to display the tooltip with only one line. How do I change the width of the tooltip? Is this specific to Twitter Bootstrap or to tooltips…
onejigtwojig
  • 4,771
  • 9
  • 32
  • 35
177
votes
4 answers

Tooltip on image

I am using the tooltip. But I want that on image tag, like when I mouseover the image then the tooltip should work. I have tried but not working for me on image tag.
user1528786
  • 1,771
  • 2
  • 11
  • 5
176
votes
6 answers

How do I add a ToolTip to a control?

I would like to display a ToolTip for when the mouse is hovering over a control. How does one create a tooltip in code, but also in the designer?
Svish
  • 152,914
  • 173
  • 462
  • 620
166
votes
6 answers

Show data on mouseover of circle

I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using: vis.selectAll("circle") …
ScottieB
  • 3,958
  • 6
  • 42
  • 60
158
votes
27 answers

Bootstrap's tooltip doesn't disappear after button click & mouseleave

I have a problem with bootstrap's tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - Bootstrap's tooltip and if I'm clicking on the buttons, I see the same problem. Is…
SilentCry
  • 1,902
  • 3
  • 16
  • 23
154
votes
8 answers

Can I use complex HTML with Twitter Bootstrap's Tooltip?

If I check official documentation, I can see a property called HTML: Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | …
sergserg
  • 21,716
  • 41
  • 129
  • 182
137
votes
11 answers

Forcing a WPF tooltip to stay on the screen

I have a tooltip for a Label and I want it to stay open until the user moves the mouse to a different control. I have tried the following properties on the tooltip: StaysOpen="True" and ToolTipService.ShowDuration = "60000" But in both cases the…
TimothyP
  • 21,178
  • 26
  • 94
  • 142
1
2 3
…
99 100