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
2
votes
0 answers

How can I align my bootrap tooltip to the front in bootstrap datatables with horizontal scroll?

I am using bootstrap tooltip inside my datatable. It worked well until I added scrollX:true. Since I did that, my tootip is covered by the table, I cannot make it visible, although I added data-container="body": var table =…
peace_love
  • 6,229
  • 11
  • 69
  • 157
2
votes
1 answer

jQuery and CSS Menu Help!

I'm attempting to make a menu bar that sticks to the bottom of the screen. Due to it's position on the screen I can't use anchor tags for hyperlinking because in Google Chrome it causes that small link bar to appear in the bottom corner (which…
Sam
  • 89
  • 1
  • 5
2
votes
2 answers

I don't have result for my fullcalendar tooltip

I'm setting tooltips on events with fullcalendar from primeng. When i run my code, i see my tooltip initialized into the web console but i can't see it when i passed my mouse over an event. I am developing with Typescript, Primeng 7.0.5, Angular…
Dervillers Mattéo
  • 175
  • 1
  • 1
  • 14
2
votes
2 answers

Create a social media Tooltip

I have put the social media icons in my footer as a "follow me" section. Now I would like to have a tooltip like this here https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom where each one would pop up with a text…
Azazel
  • 573
  • 3
  • 10
  • 23
2
votes
1 answer

Highcharts changing tooltip datetime with formatter

I have a graph that looks like the below. By default each tooltip value is in it's own tooltip "bubble", with the datetime at the bottom of the Y axis (hovering on top of the X labels). The problem is that changing the format of the datetime to…
Pat
  • 1,173
  • 5
  • 19
  • 44
2
votes
1 answer

Wrong coordinates of HTML elements obtained in components

I've added a custom tooltip to an SVG chart within gridster item (all examples are provided on stackblitz). Tooltip (div) coordinates are obtained using nativeElement and set using the Renderer2 (trivial example - tooltip div is offset by 20px).…
Gitnik
  • 564
  • 7
  • 26
2
votes
1 answer

Google charts - data from local json file - custom tooltips

I'm using google charts to create dvb-c channels availability charts. The data for charts is red from local json file. The charts are working really fine, but I would like to add one feature to it, but I need some assistanse with it. The feature I…
user3647376
  • 91
  • 2
  • 12
2
votes
1 answer

Chart.js tooltip not showing on line chart

I'm at a loss as to why my chart's tooltips aren't displaying... can anybody show me what I'm doing wrong? The tooltips work fine if I set the chart type to "bar" but for some reason don't work with "line". I'm relatively new to chart.js and am…
Will
  • 21
  • 3
2
votes
1 answer

How to add click events inside d3 tooltip?

I've a d3js barchart as below. I'm adding a tooltip on click of each bar. I'm unable add event to close the tooltip which is inside the tip. Is there a way to add that? The snippet as follows: var margin = { top: 10, right: 0, bottom:…
Raviteja
  • 3,399
  • 23
  • 42
  • 69
2
votes
2 answers

How do I add a Tooltip to a rectangular region of a JavaFX Canvas

In my JavaFX app I have a TableView with multiple columns, one of which displays data in a graphical form. To do this I have created a CanvasCell object that creates and manages its own Canvas to deal with the drawing. The drawing part works just…
Bignose
  • 141
  • 9
2
votes
1 answer

WPF Custom Control's ToolTip MultiBinding problem

When I set a ToolTip Binding In a WPF Custom Control, this way it works perfect: public override void OnApplyTemplate() { base.OnApplyTemplate(); ... SetBinding(ToolTipProperty, new Binding { …
rem
  • 16,745
  • 37
  • 112
  • 180
2
votes
2 answers

Tooltips like Twitter for Mac or Sparrow

I am trying to create custom tooltips like the ones found in Twitter for Mac, or even Sparrow. Do you have any direction for achieving this? Thanks in advance for your help, Regards,
AP.
  • 5,205
  • 7
  • 50
  • 94
2
votes
1 answer

How to display floating tool tip text on a polygon

I have written a Java code to draw a polygon on an image. When I put my cursor inside the polygon it prints "Inside" otherwise "Outside". So the detection of the points inside the polygon is working fine. But I want to implement the effect of…
user3804152
  • 115
  • 2
  • 8
2
votes
2 answers

Highcharts tooltip displayed over div

I'd like to have the pie chart tooltips to be displayed over the div partially hiding the chart. Here is my HTML structure. The .circle-text element contains my div and the .container the chart.
Sam_H_Cadman
  • 23
  • 1
  • 6
2
votes
0 answers

Use material-ui tooltip on component

I want to use the material-ui react tooltip on the following component: const Icon = ({ name, color, size, }) => { return (