I’m happy to announce that tooltips are now available for every Perspective component as of the August 5th nightly build. You can find the configuration properties for this feature in the meta category of each component.
Some important properties:
enabled: Controls whether the tooltip will be displayed on hover or if requested via scripting.
delay: How long to delay before displaying the tooltip after hover begins or after a scripting request.
sustain: How long to display the tooltip before removing it from view.
location: Where to display the tooltip in relation to the associated component - as space allows.*
tail: Controls a decorative triangle which points to the associated component. This tail does not accept direct styling at this point, but will use the background color of the tooltip.
The text and style properties are very straight-forward.
Tooltips with various styles applied, and with/without the tail enabled:
In addition to these properties, we wanted to accommodate use-cases where a tooltip is desired when a user is NOT hovering over a component. Some examples include mobile sessions and directive/progressive tooltips. To manage this extra functionality, we implemented new component methods which allow for requesting a tooltip be displayed for a component as well as for removing the tooltip from a component.
requestTooltip(): Requests a tooltip be displayed with the currently configured properties. If the enabled property for the tooltip is false, then this function call will have no effect because the tooltip is not enabled. Example: self.getSibling(‘PasswordField’).requestTooltip()
removeTooltip(): Removes the displayed tooltip for the component.
For pointers on how to properly use tooltips within your own project, I recommend reading this helpful guide: Tooltip Guidelines
* The “locations” available might appear misleading at first, but follow these guidelines, where the pink lines determine the boundaries available to the tooltip; this means that the tooltip will expand or determine its width away from the pink guidelines:
Hi @cmallonee
Thanks for this great news. I have some questions regarding this:
Does this tooltip functionality add automatically in SDK for custom perspective component as well?
Or we should add it or import to our code to have this on our own component?
Is it possible the tail and tooltip box share same border line and this this border line continues from box area to tail? (Like both is same shape not two separate shapes)
If object near edge of browser, does tooltip smart enough to change location? This important because of nature of responsiveness of view the object location can vary in different screen size so the location of appearing tooltip can’t be fixed and should be dynamic. This problem is happend before in popup for date picker.
Does tooltip show if I put component in a container with overflow to hidden? Because tooltip expose out side of container it may cause scroll bar if I don’t set overflow to hide.
Seems it works on my custom components out of the bat, nice:D
It seems to be two seperate shapes, the tail doesnt seem to get any custom styling (yet)
The tooltip gets pushed with the edge of the screen causing it to overlap with the object if set on the wrong side. So i guess avoid using center-right, and the 3 bottoms (unless its for a button on the top of the screen/left on the screen)
The tooltip gets its own container (just like the popup) so will not be affected by overflows
It should, and it looks like @victordcq confirmed this.
Not at this time. They are two separate shapes. The tail does not accept styling (including border). We will change that in the future, but it will probably be quite some time.
Yes, the tooltip will remain in the screen if opened near the edge of the viewport. As noted by @victordcq above, this can cause the tooltip to obscure the element in some conditions. We verified internally that even in those conditions the tooltip does not interfere with the component being covered, ie: if obscuring a TextField, the TextField may still be used and is fully functional.
The tooltip is not rendered in the same container as the associated component, so the tooltip will display regardless of overflow settings.
In the far future, possibly, but for now we concentrated on keeping this as simple as possible from a rendering point-of-view to prevent any possible impact on performance. If you need something as complicated as a View, then you should look into using a relatively-positioned Popup.
@cmallonee I added a “numeric entry field” component to my view and was hoping to see the tooltip options under the meta properties but it is not there.
thank you. But that does not answer my question. The "tooltipText’ existed in previous versions of Ignition. Apparently, version 8.1.9 has more options for the tooltip which I cannot find.
Sorry, wasn’t sure what you meant by options. These might have been pushed to 8.1.10 due to 8.1.9 being changed to an emergency patch release for a regression in 8.1.8. @cmallonee?
In addition, some of you have pointed out the "legacy" tooltip properties for some components. These legacy tooltips will continue to behave as they have in the past, and will not utilize any of the functionality in the META category. This was done in order to make sure that existing tooltips continued to behave as they have in the past. The last thing we wanted to do with this feature was force changes onto users already using tooltips.
So if you already have a tooltip for a Numeric Entry Field via NumericEntryField.props.tooltipText, that tooltip will remain in place and it will look identical to how it did previously. If you want to change the tooltip to use the new features you will need to set NumericEntryField.props.tooltipText to an empty string before you can use the new features.
The stable release is slated for… early-mid September. As for line-breaks in the tooltip, there is no way to force a new line at a given point; the text is sent as one block. The tooltip does honor the width property if used, so a long sentence can be broken up into multiple lines if it is “longer” than the width allows - but there is no way to force the tooltip to line-break at a desired position.
I really need to go through every css property available and learn all the good ones. I thought I was almost there, but clearly not! Thanks for the share
Seems like i wont have to make them from scratch!
Thanks for the share