Want to remove close icon/replace with some text like Skip All

[priyabratap]

Want to remove 'Close' icon / replace with some text like 'Skip All'

Is there any way to customize close icon(X)? (In my case, I want to remove 'Close' button or show 'Skip All')

As per the documentation, onDone() triggered on an event when 'Done' button or 'Close' are clicked and the Tour is finished. Can we segregate these 2 different events? (In my case, I want to track the user experience. whether the user has skipped or done all steps completely ).

I really appreciate you for this nice Directive.

[tnicola]

Hi @priyabratap, thank you!

No, with the current code is not possible to customize the close button but I can add an option in order to have your custom string. The only concern I have is: is it fine that position (top-right)? Otherwise I should think to a different solution.

And yes, I can add a different event for the close/skipAll button as well.

Ps: In the meanwhile if you want hide the X you can do it via CSS:

img.joyride-step__close {
    display: none;
}

[priyabratap]

Hi @tnicola Thanks for the response.

is it fine that position (top-right)? --- Yes, that is the best place. If possible, can we provide provision to add custom CSS for it?

[pichlou]

Hi, @tnicola I changed Close to Skip with this style : .joyride-stepcontainer .joyride-stepclose { padding: 20px 50px; border: 2px solid; border-radius: 20px; border-color: #56c6c6; color: #56c6c6; ... and another style that you want } .joyride-step__close::before { content: "Skip"; position: absolute; bottom: 20%; right: 30%; }