# Perspective Tooltip formatting? **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 9, 2022, 11:07pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854 "2022-08-09T23:07:01Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 9, 2022, 11:07pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/1 "2022-08-09T23:07:01Z")
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. ---
**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\ **Post date:** [August 9, 2022, 11:08pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/2 "2022-08-09T23:08:33Z")
There are some limited options with css: > [@Perspective tool tip text markup](https://forum.inductiveautomation.com/t/perspective-tool-tip-text-markup/60719): > > Is there a way to format selected text within a Perspective tool tip? We’d like to bold the first line, but it looks like html doesn’t work in these like it did in Vision. > [@Tooltip with Multiple Lines Needed](https://forum.inductiveautomation.com/t/tooltip-with-multiple-lines-needed/60712/2): > > Set the style of the tooltip element to whiteSpace: pre and use literal newlines (\n): [image] [image] [image] The sample you saw using \ and \ was probably for Vision tooltips, not Perspective. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 9, 2022, 11:11pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/3 "2022-08-09T23:11:43Z")
ah, I was using `pre` but didn’t know it needed `\n` 🙂 edit: hmm, still not working for me… ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b1f950953e180cd2c645edd0826cf52ab2dd80bc.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3db92272ac5f71f672a237d4ec75b586bd14565a.png) (ignore the button colours… I know you can’t read the font) ---
**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\ **Post date:** [August 9, 2022, 11:17pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/4 "2022-08-09T23:17:26Z")
Ok you posting too fast 😆 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/b/9b0e27fe098510f2ee69a5c99c038efa514391d2.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8e26c4673a9beaa441cb4b0ad1ecf3541f5fd12.png) Edit 1: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3aabfa557f3a23864baa28ce5077782efacf87d1.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a382522bd8e2d3bb6b7e11f3ea59cdced3dea15.png) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 9, 2022, 11:21pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/5 "2022-08-09T23:21:03Z")
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: ```auto [ { "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 ---
**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\ **Post date:** [August 9, 2022, 11:24pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/6 "2022-08-09T23:24:23Z")
A working example: ```auto [ { "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 ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 9, 2022, 11:25pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/7 "2022-08-09T23:25:28Z")
This is my tooltip text: ```auto "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 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aa4d3d33db382386d0b73ed065a412991fc7fe93.png) ---
**Author:** ![tupanaster](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tupanaster](https://forum.inductiveautomation.com/u/tupanaster)\ **Post date:** [August 9, 2022, 11:30pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/8 "2022-08-09T23:30:47Z")
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? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [August 10, 2022, 12:16am UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/9 "2022-08-10T00:16:32Z")
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 ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [August 10, 2022, 4:52pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/10 "2022-08-10T16:52:01Z")
Yeah, manually entered text is always escaped. You have to use an expression (or enter through the view.json) if you want escape characters. ---
**Author:** ![tyler.bennett](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@tyler.bennett](https://forum.inductiveautomation.com/u/tyler.bennett)\ **Post date:** [December 15, 2022, 12:51am UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/11 "2022-12-15T00:51:03Z")
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. ---
**Author:** ![Stephen\_Clark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stephen_clark/32/43319_2.png) [@Stephen\_Clark](https://forum.inductiveautomation.com/u/Stephen_Clark)\ **Post date:** [March 3, 2023, 7:42pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/12 "2023-03-03T19:42:54Z")
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](https://www.amcharts.com/docs/v5/concepts/formatters/text-styling/)). Here's a "complicated" string I've formatted to include **bold** text and even format dates. ```auto [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})[/] ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b86e59827cf1ee4c951ece0e961d1064926fb6f.png) 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. ---
**Author:** ![tyler.bennett](https://avatars.discourse-cdn.com/v4/letter/t/f04885/32.png) [@tyler.bennett](https://forum.inductiveautomation.com/u/tyler.bennett)\ **Post date:** [March 4, 2023, 12:04am UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/13 "2023-03-04T00:04:00Z")
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. ---
**Author:** ![Stephen\_Clark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stephen_clark/32/43319_2.png) [@Stephen\_Clark](https://forum.inductiveautomation.com/u/Stephen_Clark)\ **Post date:** [March 6, 2023, 9:21pm UTC](https://forum.inductiveautomation.com/t/perspective-tooltip-formatting/62854/14 "2023-03-06T21:21:54Z")
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](https://www.inductiveautomation.com/exchange/1514/overview)). 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/](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.