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.
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.
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.
With that done, the tooltip should show up when the user hovers over the element.