header
Solved

Is there anyway to create a button in an engagement guide tooltip that mimics the "Next Step" button - and goes to the next step of the engagement?

  • 13 August 2020
  • 6 replies
  • 119 views
R
Rank
Userlevel 1

Tooltips always have the next step button text be “Next” and I need to change it to something else. Such as “Request Access”, and then go to a dialog on then next step.

 

@alextran 

icon

Best answer by richiemin 14 August 2020, 21:01

Actually got it to work this time:

You need to create two buttons in the engagement tooltip:

<div class="px-step-navigation-next" style="color: rgb(255, 255, 255); opacity: 0; background-color: rgb(0, 100, 217); border-radius: 4px; visibility: visible;">&nbsp;Next</div>
<div class="px-step-navigation-next" style="text-align: center; color: rgb(255, 255, 255); opacity: 1; pointer-events: none; background-color: #235BA8; border-radius: 4px; visibility: visible;">Learn More</div>

The first button text automatically gets set as “Next” and actually goes to the next step on click. To change the text, this button is hidden via opacity = 0 and…

The second button has the actual text, in this case “Learn More”, but has pointer events set to none so that clicks go through to the actual button beneath it.

Next button needs absolute position to overlap the two:

/* Next Button */
.px-step-navigation-next {
  padding: 10px 20px 10px 20px;
  margin: 0px 0px 0px 10px;
  position: absolute;  
  bottom: 20px;
	left:0;
	right:0;
	margin-left:30px;
	margin-right:30px;
}

 

And .px-step-navigation-button, .px-step-navigation-buttons, and .px-step-navigation classes all have display:none in custom css.

View original

6 replies

link_black
Rank
Userlevel 6
Badge

Hi Richie, thanks for posting on PX Community.

 

I am not aware of any way to do what you describe above.  This is best to submit as a Product Idea … the ability to change previous/next button labels to whatever words you need would be great IMO.

-- Link
R
Rank
Userlevel 1

@link_black , found a way:

  1. enable navigation bar for the engagement
  2. visibility hidden: for the navigation bar step button in custom css
  3. create a button with same class as the next button, but do inline css to visiblity:visible
  4. display:none for the nav bar container to cut out the empty space

 

link_black
Rank
Userlevel 6
Badge

Excellent CSS customization @richiemin , nice work! 

 

Do you mind posting your custom CSS code so myself and others can learn too? A screenshot will be fine. 🙂 Thank you!

-- Link
R
Rank
Userlevel 1

@link_black  Nvm ): it is only cosmetic - the next button function isn’t there.

R
Rank
Userlevel 1

Actually got it to work this time:

You need to create two buttons in the engagement tooltip:

<div class="px-step-navigation-next" style="color: rgb(255, 255, 255); opacity: 0; background-color: rgb(0, 100, 217); border-radius: 4px; visibility: visible;">&nbsp;Next</div>
<div class="px-step-navigation-next" style="text-align: center; color: rgb(255, 255, 255); opacity: 1; pointer-events: none; background-color: #235BA8; border-radius: 4px; visibility: visible;">Learn More</div>

The first button text automatically gets set as “Next” and actually goes to the next step on click. To change the text, this button is hidden via opacity = 0 and…

The second button has the actual text, in this case “Learn More”, but has pointer events set to none so that clicks go through to the actual button beneath it.

Next button needs absolute position to overlap the two:

/* Next Button */
.px-step-navigation-next {
  padding: 10px 20px 10px 20px;
  margin: 0px 0px 0px 10px;
  position: absolute;  
  bottom: 20px;
	left:0;
	right:0;
	margin-left:30px;
	margin-right:30px;
}

 

And .px-step-navigation-button, .px-step-navigation-buttons, and .px-step-navigation classes all have display:none in custom css.

link_black
Rank
Userlevel 6
Badge

Nice custom CSS coding @richiemin.  Thank you for sharing!

 

I will create the PX Product Idea to hopefully make this much easier! ;) 

-- Link

Reply