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
72
votes
10 answers

How do I display tooltips in Tkinter?

Tooltips are those little bits of text that popup when the mouse hovers over a widget for a certain duration of time. How can I add a tooltip message to my tkinter Python application?
rectangletangle
  • 50,393
  • 94
  • 205
  • 275
70
votes
7 answers

jQuery override default validation error message display (Css) Popup/Tooltip like

I'm trying to over ride the default error message label with a div instead of a label. I have looked at this post as well and get how to do it but my limitations with CSS are haunting me. How can I display this like some of these examples: Example…
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
67
votes
5 answers

Adding a tooltip to an input box

I am using the CSS.Tooltips library to try an get a tooltip to show up on an input tag. I can get it to work on a p tag but not an input tag. Any ideas? Here is link to the fiddle: http://jsfiddle.net/cwlanca/BumU5/1/ Code [data-tip] { …
Lance Collins
  • 3,365
  • 8
  • 41
  • 56
66
votes
8 answers

Add tooltip to font awesome icon

Has anyone here added tooltips to font-awesome icons? I have the following jsfiddle, but cannot seem to find a guide to add tooltips to the icons.
Harriet
  • 1,633
  • 5
  • 22
  • 36
64
votes
6 answers

How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?

I'm trying to show some data using a doughnut chart from Chart.js2. My current chart looks like this: My desired output must show another attribute, which is the percentage, and looks like this: I've read the documentation, but I can't cope with…
RamAlx
  • 6,976
  • 23
  • 58
  • 106
60
votes
12 answers

Tooltips in the era of touch

Tooltips are an incredibly useful interface paradigm to know an application. They are the mapping between the visual control and the application specific action associated to that control. The user can explore the action without invoking it just by…
Stefano Borini
  • 138,652
  • 96
  • 297
  • 431
60
votes
2 answers

Bootstrap tooltip causing buttons to jump

When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
Brian Salta
  • 1,576
  • 1
  • 10
  • 18
57
votes
12 answers

Set font size of Angular Material Tooltip

I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy. I am using Angular 4 and Angular Material to implement tooltips like this:
GLR
  • 1,070
  • 1
  • 11
  • 29
53
votes
8 answers

How to add line breaks within tooltip in angular material design

How to add line break in tooltip I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code http://codepen.io/apps4any/pen/RWQLyr Html
apps4any
  • 603
  • 1
  • 6
  • 6
53
votes
7 answers

Is there a way to have content from an IFRAME overflow onto the parent frame?

I have a UI widget that needs to be put in an IFRAME both for performance reasons and so we can syndicate it out to affiliate sites easily. The UI for the widget includes tool-tips that display over the top of other page content. See screenshot…
Andrew Hedges
  • 21,688
  • 16
  • 67
  • 79
53
votes
4 answers

How to add a twitter bootstrap tooltip to an icon

I would like to add a right-tooltip from Twitter Bootstrap to an icon element. The code is this:

Sensors Permissions

I would that, when the cursor is over the icon, a right-tooltip with some information is…
sharkbait
  • 2,980
  • 16
  • 51
  • 89
50
votes
5 answers

Turn the Tooltip Bootstrap functionality off

According the documentation is is possible to turn off the functionality just doing $('body').off('.alert.data-api'). In the case of tooltip I tried the following from js console $('body').off('.tooltip.data-api') but it does not disable the tooltip…
Lorraine Bernard
  • 13,000
  • 23
  • 82
  • 134
49
votes
8 answers

Aligning text in bootstrap tooltip

Bootstrap tooltip aligns text to the middle by default. I'd like to align to the left. Is there any nice way of doing this within HTML, instead of modifying CSS file? Here is my sample code:

agerrr
  • 1,253
  • 5
  • 14
  • 24
48
votes
4 answers

Conditionally activate Material UI tooltip?

I have the following React component using Material UI: const MyButton = ({ warningText }) => ( ) Currently, this shows an empty tooltip when warningText is…
Anders
  • 8,307
  • 9
  • 56
  • 88
48
votes
10 answers

Styling the arrow on bootstrap tooltips

I'm trying to style tootltips using .tooltip-inner{} But i'm having troubles cause i can't find how to style tooltip small arrow. As shown on screenshot the arrow of the tooltip is black i want to add new color on that: any suggestion?
itsme
  • 48,972
  • 96
  • 224
  • 345
1 2
3
…
99 100