Changing pseudo class styling

[JoeldelPilar]

Hi! 👋🏼
I'm using Joyride for the first time and I'm a junior frontend dev. I wonder if there is any way to change the styling of :focus on the tooltip? The default color of the outline when tab-ing to the buttons is not matching our color profile and if it is possible I would like to change the styling. 😃

[gilbarbara]

Hey @JoeldelPilar

I think it's using the browser's default outline style.
You could target the CSS classes to change the globally.

.react-joyride__beacon:focus,
.react-joyride__tooltip button:focus {
	outline: 1px solid #ff0044;
	border-radius: 2px;
}

Or use a custom tooltip where you can customize everything.

Good luck.

[JoeldelPilar]

Thank you for getting back at me so quick! 🙏🏼 I'll try your suggestions out today. Appreciate the work you do, ☀️