Display element in guide in a hover state
Looking for a way to display an element in hover state during a guide. We have elements in our page which we want to highlight as step in our guide, but we want the state of the element to be its hover state when the guide gets to this element.
We noticed a custom css field is possible in the anchoring of a guide to a specific element, however it is not clear how we can enable a hover state for that element.
0
Comments
Hi Steven Rai,
Thanks for posting in the Discussion Community. Have you checked out this article about guide activation options:
From your description, it seems like you're talking about Badges and how a guide will be displayed when a user hovers or clicks the element. Let the Community know if this article works for what you're trying to do.
Thanks Howard - i've seen this article but what I am looking for is a bit different: to describe my scenario better:
I have a guide (on a web-app) which is a walk through of what each icon in the navigation menu will direct the user to. The guide currently has tool tips which point to each icon in the navigation one at a time (step by step), describing the impact of each menu item. The issue I am facing is the navigation icons all slightly change if a user was to hover over them, and I want the guide to mimic that hover on each icon when the guide step is pointing to the icon.
Hi Steven,
Thanks for the explanation - something like this correct? https://stackoverflow.com/questions/6406976/how-to-trigger-css-hover-state-using-javascript/6407065
Would you actually be able to share a recording of how the icon "changes" in the hover state? This could be helpful to see what custom code you'll need to use to have the guide trigger the hover state. You can use a shared link since there is a size limit in this forum threads for images/videos.
Here is one icon unhovered:
Here it is if the user was to hover over it:
Here is my guide step which points to this icon (but points to it in the unhovered state where I want a way to be able to change the state to hovered when the guide points at the icon):
Hi Steven Rai,
This would require custom code that's dependent on your application. Nothing within Pendo would allow you to change the button that lives within the product's code.
There are ways to get a custom code block's JS to add a class or the styles to indicate what a hover is, but this may be something that you could work with our Professional Services team if you're interested.
Please sign in to leave a comment.