Search code examples
reactjstailwind-cssdaisyui

Tailwind DaisyUI - Styling tooltip

I am using Tailwind CSS and DaisyUI, but not using any themes for my ReactJS application. All CSS customization has been working fine, except the background of the tooltip text (i.e. the text that is shown on hover), which appears to be transparent. When I try to set the style using tooltip class, it instead changes the icon associated with tooltip, instead of the tooltip itself. What class or other CSS selector can I use to modify the style for the tooltip text?

-- Edited to add more information --

The problem is with the tooltip text ("Shown in the list"), as shown in the image below.

enter image description here

The code is:

<div className="ah-input-title">Analysis Title
    <span className="tooltip tooltip-bottom" data-tip="Shown in the list">
    <InfoIcon alt="Info"/>
    </span>
</div>

tailwind.config.js:

module.exports = {
    content: ["./src/**/*.{html,js,jsx}"],
    themes: [],
    theme: {
        fontFamily: {
            sans: ['Aeonik', 'sans-serif']
        }
    },
    plugins: [require("@tailwindcss/typography"), require("daisyui")],
    daisyui: {
        themes: [],
    },
}

In index.css, the top part has:

@tailwind base;
@tailwind components;
@tailwind utilities;

followed by specific styles as needed. For example, ah-input-title is defined as follows:

.ah-input-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

I tried modifying .tooltip and associated .tooltip-* classes, but they affect the placeholder text ("Analysis Title"), not the tooltip itself ("Shown in the list"). All I need is the class or CSS selector so that the tooltip text ("Shown in the list") has a solid background instead of transparent.

Solution

  • I figured it out, posting in case someone else runs into the same issue.

    It is as easy as defining the following in the CSS file:

    .tooltip {
    --tooltip-color: #000;
    --tooltip-text-color: #FFF;
}

    I defined it in index.css itself, and it works on all tooltips throughout the project.