Remove hover tooltip from Google Visualization pie chart (core chart)

Question

How to remove hover tooltip from Google Visualization pie chart (core chart)? Need to make it work cross-browser, eg, IE, FF, Chrome, Safari, Opera

enter image description here

Edit: I need the slices to be be clickable too.
enableInteractivity : false removes the hovers but doens't throw 'select' or other interaction-based events.

From this: http://code.google.com/p/google-visualization-api-issues/issues/detail?id=383 it doesn't seem that you can do it. Unless you can hack onmouseover somehow... — AR., Dec 06 '11 at 07:37
http://code.google.com/apis/chart/interactive/docs/release_notes.html - "Tooltip - In the current version, tooltips open automatically on mouse hover; you cannot open or close them using the API." I checked source code for SVG and it doesn't seem that there's any class that that assigned to tooltips so hiding using css or js will not work. — AR., Dec 06 '11 at 07:42

score 55 · Accepted Answer · answered Dec 13 '11 at 14:12

55

Maybe you need to add this to your chart's options

'tooltip' : {
  trigger: 'none'
}

In this way you can leave enableInteractivity set to true.

answered Dec 13 '11 at 14:12

Sir_Faenor

878
6
13

that does not work for me. the tooltip boxes are still displayed. – dokaspar Feb 24 '12 at 13:01
Thank you for the answer. This attribute was released after I posted my question. It was a much needed functionality, hence Google took it up. – Shumon Saha Jan 21 '13 at 07:14
1

@Dominik: I had a similar issue with the Timeline visualization, as the `tooltip` option doesn't seem to be supported. I wasn't able to suppress the hover event itself, but defining a CSS style of `display: none;` for elements with the class `google-visualization-tooltip` kept the Timeline tooltips hidden. The class seems generic enough that I'd expect this might work with other chart types as well. – jmikola Sep 18 '13 at 08:41
In the case of the wordTree visualization, @jmikola suggestion didn't work either. My dirty hack was to modify the id values of the elements I didn't want any event to be associated to. – elachell Jun 29 '16 at 17:20
1

Thanks - worked for me, only with no quotes around `tooltip` so in context it's `var options = { tooltip: { trigger: 'none' } };` – wunth Dec 18 '16 at 22:15
Thanks. This is exactly what I was looking for. – Kalpesh Panchal Feb 01 '17 at 22:09

score 19 · Answer 2 · edited Feb 19 '15 at 15:30

19

Use the enableInteractivity = False option. It will disable interaction and hover.

chart.draw(data, {   
  width: 400, 
  height: 240, 
  title: 'Your chart and data',
  enableInteractivity: false,
  hAxis: {title: 'Year'}
});

edited Feb 19 '15 at 15:30

AlexMA

9,842
7
42
64

answered Dec 03 '11 at 01:38

Nix

57,072
29
149
198

Thanks Nix. However, I need the slices to be be clickable too. "enableInteractivity : false" removes the hovers but doens't throw 'select' or other interaction-based events. – Shumon Saha Dec 06 '11 at 07:25
My God, 2 hours searching for this. Thanks Bro – Mahmoud Jul 26 '22 at 13:34

score 3 · Answer 3 · answered Oct 06 '16 at 11:50

3

set tooltip: { isHtml: true } in option section.

chart.draw(data, {   
  tooltip: { isHtml: true },
  width: 400, 
  height: 240, 
  title: 'Title',
  hAxis: {title: 'Year'}
});

in css file

div.google-visualization-tooltip { display:none }

answered Oct 06 '16 at 11:50

Dasun

3,244
1
29
40

score 2 · Answer 4 · edited Jul 14 '17 at 05:09

2

This remove hover event but maintains the click event:

tooltip: { trigger: 'selection' }

edited Jul 14 '17 at 05:09

CharithJ

46,289
20
116
131

answered Dec 20 '13 at 18:23

zsimo

121
1
5

Remove hover tooltip from Google Visualization pie chart (core chart)

4 Answers4

Linked