When working with Tippy.js, you can quickly change the look and feel of your tooltips and popovers by applying themes. Tippy.js comes with several built-in themes, such as the light theme, which you can use by adding the theme option when initializing a tooltip. This is shown in the example above with the first button, where the tooltip uses the built-in "light" theme for a clean, minimal appearance.

To go beyond the built-in options and create a unique look, you can define your own custom CSS class and apply it as a theme. In the example, the second button uses a custom class called custom-tippy-theme. This class customizes the tooltip's background with a gradient, updates the text color, adds a rounded border, and adjusts the arrow color based on placement. To use a custom theme, simply pass the class name as the theme option when creating the tooltip. Tippy.js automatically adds this class to the tooltip element, letting you target and style it with your own CSS rules.

When overriding styles, always use class selectors that are specific to your theme. This prevents conflicts with other tooltips and ensures that your customizations only apply where you intend. For consistent UI, keep your theme classes organized and use CSS variables or shared color palettes if possible. This makes it easier to maintain a unified look across your project, even as you add more tooltips or popovers.

Custom themes are especially useful for matching tooltips to your brand colors or adapting them to different contexts in your app. By combining built-in themes for quick setup and custom styles for flexibility, you can create tooltips that fit seamlessly with any design system.