Tooltip Font Misbehaving

[CeBe]

I have set the font of the tooltip using tooltip: {textStyle: {fontSize: 12, fontName: 'Arial'}. This works for the tooltip "labels", but not the actual values. See screenshot. How do I set the font of the values?

[Andrew Gallant]

The font should apply to both, and does when I created a test case: http://jsfiddle.net/asgallant/u8j9D/.  Can you provide a full code example that replicates the problem?

It is possible that you have CSS that is messing with the tooltips; I suggest examining the tooltip with a DOM inspector to see where the wrong fonts are coming from.

[CeBe]

When I put my code in jsfiddle, the font is fine. I'm having trouble getting dev tools to let me pick the tooltip in the DOM and I don't see it when viewing source. Any tips?

[Andrew Gallant]

If it works fine in jsfiddle then you almost certainly have CSS that is changing it.  If you use Chrome's developer tools, you can drill down into the SVG code inside the chart container.

[Cicely Behne]

Looks fine in Chrome/Firefox and Chrome dev tools didn't reveal anything that may be causing the fonts to appear incorrectly in IE. Client uses IE mainly, so would like to figure out the cause in IE.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/RQZ0ovzTjj0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--
Cicely S. Behne

cic...@cicelybehne.com

(580) 461-2999

[Andrew Gallant]

Which version of IE?

On Monday, August 4, 2014 3:03:12 PM UTC-4, CeBe wrote:

Looks fine in Chrome/Firefox and Chrome dev tools didn't reveal anything that may be causing the fonts to appear incorrectly in IE. Client uses IE mainly, so would like to figure out the cause in IE.

On Fri, Aug 1, 2014 at 8:27 PM, Andrew Gallant <agal...@google.com> wrote:

If it works fine in jsfiddle then you almost certainly have CSS that is changing it.  If you use Chrome's developer tools, you can drill down into the SVG code inside the chart container.

On Friday, August 1, 2014 12:17:51 PM UTC-4, CeBe wrote:

When I put my code in jsfiddle, the font is fine. I'm having trouble getting dev tools to let me pick the tooltip in the DOM and I don't see it when viewing source. Any tips?

On Thursday, July 31, 2014 11:49:58 PM UTC-4, Andrew Gallant wrote:

The font should apply to both, and does when I created a test case: http://jsfiddle.net/asgallant/u8j9D/.  Can you provide a full code example that replicates the problem?

It is possible that you have CSS that is messing with the tooltips; I suggest examining the tooltip with a DOM inspector to see where the wrong fonts are coming from.

On Thursday, July 31, 2014 12:34:51 PM UTC-4, CeBe wrote:

I have set the font of the tooltip using tooltip: {textStyle: {fontSize: 12, fontName: 'Arial'}. This works for the tooltip "labels", but not the actual values. See screenshot. How do I set the font of the values?

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/RQZ0ovzTjj0/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[CeBe]

7, 8, and 9 all behaving the same. When I look at this JSFiddle in IE, it looks fine. When I save the code as HTML and view it on my site, the font changes on the bold again. Something is messing it up on the site with CSS, but since I can’t drill down to the circle elements using IE dev tools, I’m kind of stuck.

On Monday, August 4, 2014 7:51:01 PM UTC-4, Andrew Gallant wrote:

Which version of IE?

On Monday, August 4, 2014 3:03:12 PM UTC-4, CeBe wrote:

Looks fine in Chrome/Firefox and Chrome dev tools didn't reveal anything that may be causing the fonts to appear incorrectly in IE. Client uses IE mainly, so would like to figure out the cause in IE.

On Fri, Aug 1, 2014 at 8:27 PM, Andrew Gallant <agal...@google.com> wrote:

If it works fine in jsfiddle then you almost certainly have CSS that is changing it.  If you use Chrome's developer tools, you can drill down into the SVG code inside the chart container.

On Friday, August 1, 2014 12:17:51 PM UTC-4, CeBe wrote:

When I put my code in jsfiddle, the font is fine. I'm having trouble getting dev tools to let me pick the tooltip in the DOM and I don't see it when viewing source. Any tips?

On Thursday, July 31, 2014 11:49:58 PM UTC-4, Andrew Gallant wrote:

The font should apply to both, and does when I created a test case: http://jsfiddle.net/asgallant/u8j9D/.  Can you provide a full code example that replicates the problem?

It is possible that you have CSS that is messing with the tooltips; I suggest examining the tooltip with a DOM inspector to see where the wrong fonts are coming from.

On Thursday, July 31, 2014 12:34:51 PM UTC-4, CeBe wrote:

I have set the font of the tooltip using tooltip: {textStyle: {fontSize: 12, fontName: 'Arial'}. This works for the tooltip "labels", but not the actual values. See screenshot. How do I set the font of the values?

--

[Andrew Gallant]

I can't replicate this on my end.  Can you post a link to the misbehaving page, or attach an HTML file that exhibits the behavior?