Adding a tooltip to your project

NOTE: With the release of 8.1.10, this article is outdated. However, I will keep it up incase a user is required to use an older update.


I was tasked with creating tooltips for one of our clients. As of right now, tooltips are not a built in option so I had to build a workaround. Here is what I ended up with. Feel free to use this in your own projects and make any changes as you see fit. Also, any ideas on how I can make this better would be greatly appreciated.

-- CREATING THE VIEW --
First, you need to create the view and you need to add in a single label.
image

You don't need to make any changed to the view or the root. All of the changes will be in the label itself.

On the label the first thing you will do is configure the events. This tooltip is controlled using a session variable. You can just add the variable to the session properties or you can make this more modular and create it dynamically. For onStartup, add the following code to a script:

	self.session.custom.tooltip = {
		"text": "",
		"event": ""
	}

The onMouseEnter and onMouseLeave event listeners are a bit buggy and don't always fire which causes the tooltip to stick around even after you have left the element. As a not very good band aid, add the following code to the onMouseEnter for the label:

	self.session.custom.tooltip.text = ''
	self.session.custom.tooltip.event = ''

This will cause the tooltip to be hidden if the user hovers over it. Now you can save these scripts.

Next, on the label, go to props > text and configure the binding for it. Select property and point it to session.custom.tooltip.text. This will update the text depending on what the user is hovering over.

Next, you need to configure the binding for the position > display property. Under the expression tab, add this code {this.props.text} != ''. This is looking up the text that you just fixed and returning true if the text is NOT blank and false if it is.

Next, we need to style the label. For now, you can put in some example text and set the display to true so that you can see what it looks like. You can make it look however you want, but this is what mine looks like.

image
and these are the settings I added.

backgroundColor: #444444
color: white
fontFamily: Helvetica
fontSize: 0.8em
borderRadius: 8
padding: 5px 10px
transition: transform 0.25s

Make changes as you see fit.

Next, these other styles are the ones that are important to make the tool tip work.

whiteSpace: pre
zIndex: 99
position: fixed
top:
left:
transform:

The whiteSpace is needed incase the tooltip has a line break in it. The zIndex is needed to make sure the tooltip shows up above everything else. Set this number higher if there are other things with an even higher zIndex. For a better understanding of position: fixed, see this article. As for the last three, I left them empty because they will be added in dynamically and these are what allows the tooltip to know where on the screen it should be. For each of these you will need to select 'Configure Binding', point the Property Binding to session.custom.tooltip.event and add a transform script with the following code.

top

	return value.clientY if value != "" else ""

left

	return value.clientX if value != "" else ""

transform

	### Used to possition the tooltip so that it is not right on the cursor. 
	if value == "": return ""
	
	### This is used to dynamically possession the tooltip above or below the
	### cursor and to the left or right of the cursor depending on where on the
	### screen the cursor is located. This uses the `dimensions.viewport` 
	### properties which were introduced in 8.1.6. If you are using an older 
	### version of ignition, then this will not work and you will need to use the
	### below code instead.
	shiftX = value.clientX > self.page.props.dimensions.viewport.width / 2
	shiftY = value.clientY > self.page.props.dimensions.viewport.height / 2

	x = "-100%" if shiftX else "10px"
	y = "-100%" if shiftY else "15px"
	
	return "translate(" + x + ", " + y + ")"

	### If you are using Ignition 8.1.5 or lower, then comment out the above code
	### and uncomment the code below.
	#return "translate(10px, 15px)" 

Now you are done with creating the tooltip view.

-- ADDING THE TOOLTIP TO THE PROJECT --
To add the tooltip to the project, you will need to add it as a docked view. If you already have a docked view that is always showing like a header you could just add it to the root of the header view, but you could also just add the tooltip view as a docked item.
In my project, I don't have anything docked to the bottom so that is where I put it. Make sure you set the Content to 'cover' and the Size to '1'. If you don't set the size, then you will just have a big empty section on your page and if you set it to 0, it automatically sets it back to the default size.


Click OK and you are done with this part.

-- ADDING THE TOOLTIP TO THE ELEMENT ITSELF --
Now to add the tooltip to the element itself you just need to do the following to each of them.
First, configure the event and add a script to onMouseEnter, onMouseLeave, and onMouseMove.
Then add the following code to the appropriate scripts:
onMouseEnter

	self.session.custom.tooltip.text = self.custom.tooltip
	self.session.custom.tooltip.event = event

onMouseLeave

	self.session.custom.tooltip.text = ''
	self.session.custom.tooltip.event = ''

onMouseMove

	self.session.custom.tooltip.event = event

Lastly, for each of the elements, you need to add a custom variable called 'tooltip' with the text that you want the tooltip to display.
image

With that done, the tooltip should show up when the user hovers over the element.
image

4 Likes

Thanks for making this. This is also a requirement for one of my projects, and I’ve dabbled with some potential solutions for this with not so great results.

According to this feature request: Add tooltip text property to Perspective objects | Voters | Inductive Automation (canny.io), there should be a built-in tooltip feature in the near future, however if it doesn’t pan out for whatever reason, I’ll give your solution a shot.

1 Like

PSA: Perspective tooltips for all components is extremely likely for 8.1.10.

Edit: updated to reflect the 8.1.9 emergency release.

4 Likes

Good to know.

Interesting solution! Also interesting for ideas for other things as well, not just tooltips. Very cool, thanks for sharing

2 Likes

Very nice!
Just one thing, if you want tooltips on popup windows, the z’index will have to be higher.
For me popups have z-index: 12560;

1 Like

@ToMakPo thank you for sharing this original implementation. Inductive, thank you so much for releasing native tooltips in 8.1.10!

2 Likes