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.
Best answer by richiemin
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;"> 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.