Perspective hover styling

will it be possible to add the ‘hover’ property to the styling class?

I believe that what you’re looking for already exists. Add a new Style Class to your perspective project. Add an alternate Style Rule to the style class, choose an “Element State” rule. New set the Element State to “hover”. The style you configure here will only be applied when the mouse hovers over any component that uses your style class.

2 Likes

Is there a way to add custom styles to a style class that are not explicitly included in the style editor? i.e. Adding visibility: “visible” to the hover state?

I think I read somewhere that they are looking to add more features to the style editor. Its a bit trickier, but I was able to add some styles via the json style files in the gateway directory, though its probably not recommended by IA to go that route.

Do all the above comply towards displaying name of a component when hovering over with the mouse?

No, we removed tooltip functionality a long while ago because it interferes with click events and visibility.

Is this something that would potentially be reintroduced in the future? The ability to display a piece of text like a machine state when hovering would be very useful.

It depends on the type of component and whether there’s enough of a community need for it.

Inputs will probably never get tooltips back because the tooltip can interfere with interaction, which is a huge no-no for industrial applications (this is also part of the reason we might not do it for any components, as hovering over a display component could interfere with an input). Displays could get tooltips back in the future, but there’s a wrinkle which could prevent this: While displays are only intended to display information, there’s nothing to stop users from placing click events on them, which turns display components into input components.

I think our project structure might also play a factor in the decision because I don’t think there’s technically a “BaseDisplayComponentClass” concept for the components to inherit from, so we’d need to supply the tooltip property to each display component individually, which means including the same logic/handling for each.

TLDR; probably not, but never say never.

So when referring to components vs. displays are you talking about stuff like embedded views and flex repeaters?

For example if you have a flex repeater that shows 50 views, and you wanted an on-hover action to display a piece of information about that view. You are saying that it would not be possible to have an onClick event AND a mouseover-text/tooltip for the same embedded view?

Components is every single item within the Perspective Component Palette, including Containers. “Displays” is the subset of components which fall under the “Display” category.

You’re mixing terms here; A Flex Repeater repeats instances of a supplied View, and in no way uses the Embedded View Component.

Now, supposing the Flex repeater had a tooltip, hovering over ANY of the instanced Views would display the same text, because the Flex Repeater has the tooltip - probably not desirable. So let’s put the tooltip on a component within the instanced View, say, a Label. Now, when we hover over the specific Label in a View, we get information about the View, but this is information we could just put in the Label anyway, so why isn’t it there?

The Flex Repeater and Embedded View are good examples of components which should NOT have tooltips, because their tooltip wouldn’t tell you anything useful about what is contained within them, because they’re very much just a way to display some other View (many times or one time); the View should be responsible for displaying its own information, and if the View is responsible for displaying its own information AND the information is important, then it shouldn’t be in a tooltip.

No, that’s not what Im saying at all.

What I was trying to convey is that if you have a Label right next to a button, and that label has a tooltip, then if you hover over the label while moving your cursor to the button, then there is a chance that the tooltip displays partially over the button. When/if this happens and the user clicks while still within the tooltip, then the click event would not be on the button, and so whatever action the button is supposed to take will not happen. In industrial environments, this is unsafe.

Take a look at the following screenshot and image my cursor was in the area defined as the overlap of the tooltip on the button. What happens when I click?
22%20AM

1 Like

Also keep in mind that there really isn’t an easy (any?) way to use hover as a trigger in a mobile application or mobile browser. Avoid it.

I have a need for it!

It sounds like the tooltip might be coming. It is marked as “Planned”. Does that mean the developers do indeed plan on making this a thing?

https://inductiveautomation.canny.io/ignition-features-and-ideas/p/add-tooltip-text-property-to-perspective-objects

That’s exactly what the “Planned” state means :slightly_smiling_face:. The tooltips idea has been prioritized for the coming quarter, with feature specs and documentation in place already.

1 Like