Tooltip with Multiple Lines Needed

General Discussion
1

Good afternoon Team,

One more question today. I have read on the forum that to add breaks in a line you need to add at the beginning and
where you want the line break.

It was not very clear for someone like me so I am not sure how to fix this tool tip.

Any help?

"<html>Location Status: + <br>" +
"<html>Aisle: " + {view.params.Aisle} + "<br>" +
"<html>Rack Side: " +{view.params.RackSide} + "<br>" +
"<html>Rack Field: " + {view.params.RackField} + "<br>" +
"<html>Rack Position: " + {view.params.RackPlace} + "<br>" +
"<html>Level: " + {view.params.Level} + "<br>" +
"<html>Depth: " + {view.params.Depth} + "<br>" +
"<html>Bin Status: " + {view.params.Status} + "<br>"
[details="Summary"]
This text will be hidden
[/details]
2

Set the style of the tooltip element to whiteSpace: pre and use literal newlines (\n):
image
image
image

The sample you saw using <html> and <br> was probably for Vision tooltips, not Perspective.

3 Likes
3

Awesome, thank you so much. Is there a document that describes what all those different things like whiteSpace can do?

4

Not really. It’s actually a CSS attribute that we’re emitting to the web browser; Ignition doesn’t have anything to do with what it does or not. And there’s a lot of CSS attributes, so trying to document them all is a huge endeavor.

If you’re ever curious about a style attribute, I’d highly recommend the Mozilla Developer Network; e.g. I googled mdn white space and got this: white-space - CSS: Cascading Style Sheets | MDN

5

what about for a marker on a map. I am trying to get multiple lines there but there is no option for style.
Is there any way I can get this to work that you know of.
Any help would be appreciated.

6

@Conn_Mccurdy
here i answered it before

7

image
image357×559 24.3 KB

I am still a bit confused as to where i am supposed to be putting these themes and the white space. Just not clicking with me

8

yeah in that topic i said the style property in tooltips doesnt seem to work, so you gotta use
css injection or theme.css

9

create a random styleclass
and paste this into the background image

}.leaflet-tooltip{
  white-space: pre
}{
1 Like
10

unfortunately css.injection or theme.css are not working. Its seems like its telling me that that property isnt available.

11

show me what you tried, it worked for me

12

image

image
image339×514 21.1 KB

13

uf yeah they are not properties.
theme.css are css files stored on your igntion folder
injection is injection css in a styleclass.
in the topic i linked above there is a post linking to some more info on these.