Display element in guide in a hover state

Comments

5 comments

  • Avatar
    Howard Lio

    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. 

    0
    Comment actions Permalink
  • Avatar
    Steven Rai

    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. 

     

    0
    Comment actions Permalink
  • Avatar
    Howard Lio

    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.

    0
    Comment actions Permalink
  • Avatar
    Steven Rai

    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):

    0
    Comment actions Permalink
  • Avatar
    Howard Lio

    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.

    0
    Comment actions Permalink

Please sign in to leave a comment.