Is it possible to format the text in a tooltip?
I want to be able to for example add line breaks and maybe bold on specific words etc.
There are some limited options with css:
1 Like
ah, I was using pre but didn’t know it needed \n 
edit: hmm, still not working for me…
(ignore the button colours… I know you can’t read the font)
Now I’m very confused. Why is mine not working?? I’m in 8.1.18 and I’ve tried on multiple components, no dice. Can someone copy a basic working component and paste the JSON into here for me to try with?
This is mine:
[
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "From Excel Table"
},
"meta": {
"tooltip": {
"enabled": true,
"text": "asdasd\\n/nasdasd",
"style": {
"whiteSpace": "pre"
}
},
"name": "Label"
},
"position": {
"basis": "32px"
},
"custom": {}
}
]
I tried both \n and /n for giggles
Ha. It’s escaping the \n!
Yep, that was it. I removed the escape character and it works now. Weird
A working example:
[
{
"type": "ia.display.label",
"version": 0,
"props": {
"text": "Tooltip Example"
},
"meta": {
"tooltip": {
"enabled": true,
"style": {
"whiteSpace": "pre"
}
},
"name": "Label_23"
},
"position": {
"x": 0.4766,
"y": 0.0538,
"width": 0.0865,
"height": 0.0331
},
"custom": {},
"propConfig": {
"meta.tooltip.text": {
"binding": {
"type": "expr",
"config": {
"expression": "'Something\\n' + 'else' + 'more\\n' + 'more\\n' + 'more\\n' + 'more\\n'"
}
}
}
}
}
]
My version is 8.1.19
1 Like
This is my tooltip text:
"text": "Given a table of tag paths and tag properties, this function will write the tag properties to the tag paths.\\nExpects a TSV e.g. table copied from Excel with the columns:\\nTagPath\\tTagProp1\\tTagProp2\\nTag/Path\\tVal1\\tVal2",
I wonder why mine is adding the escape characters…
Once I remove them in the JSON and paste back in, it’s fine thanks all
In my copy/paste its also added but it’s not in my binding.
Your text is a string with an escape character and mine an expression binding. It looks like it will display a string as a string even if it has an escape character. How did you got your last one to work?
That’s interesting it works as an expression…
I got my string to work by copying the button component (i.e. the component JSON), editing it in npp, and pasting it back in 
mildly annoying and definitely not intuitive
Yeah, manually entered text is always escaped. You have to use an expression (or enter through the view.json) if you want escape characters.
So, are there no formatting options for tooltips other than whitespace (e.g. \n \t)?
Hoping there is a way to do bold, italic and underline.
Already lost hope on using tables in the tooltip.
I've done further research and found that everything I wrote below likely only works for the XY Chart series tooltip. It's based on amCharts, so you can use [bold] [/] to bold things (source).
Here's a "complicated" string I've formatted to include bold text and even format dates.
[bold]{name}:[/]
[bold]Reason:[/][light] {reason}[/]
[light]{start.formatDate('EEEE M/d, hh:mm a')}[/] [bold]to[/] [light]{end.formatDate('EEEE M/d, hh:mm a')} ({duration})[/]
It's a tooltip for an XY Chart (props > series > 0 > tooltip > text). I don't know if the formatting differs for whatever tooltip you're trying to use, but I figured I'd mention it.
2 Likes
Could you point me at the reference information that indicates what formatting options are available in the tooltip?
Your example appears to be a parameterized string and not an expression. Is this in Vision or Perspective?
I'll have to play with that a little, thanks for the lead.
It's Perspective's XY Chart component. It's based on amCharts. To be completely honest, I don't know much about amCharts. I just learned about it from @bmusson who built the Ribbon Chart on the exchange (link). One of my applications is based on his Ribbon Charts.
As for the formatting options, this is a good start:
https://www.amcharts.com/docs/v5/concepts/formatters/text-styling/
Also, I asked ChatGPT for help with the formatting too, and it helped a little bit.