How to Use attr(data-tooltip) in the content Property of Pseudo-Elements with Tailwind CSS

[MonaAghili]

I'm trying to create a tooltip using the attr(data-tooltip) in CSS for a button element. Here's the structure I'm using:

HTML:

<button data-tooltip="This is content of tooltip" class="tooltip">Tooltip</button>

CSS:

button.tooltip {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 26px;
    color: black;
    background: white;
    border: 0.3px solid rgba(0, 0, 0, 0.322);
    min-height: 24px;
    padding: 0px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
    transform: translateY(-20px) scale(0.9);
    opacity: 0;
    transition: 200ms;
}

[data-tooltip]:hover::after {
    transform: translateY(0px) scale(1);
    opacity: 1;
}

This works perfectly in plain CSS, but I’m struggling to implement this behavior using Tailwind CSS. I want to achieve the same tooltip functionality but with Tailwind utility classes. Does anyone have experience with this or suggestions on how to approach it?

[wongjn]

You should be able to use an arbitrary value: https://play.tailwindcss.com/Hd3iQZJJrb

[MonaAghili]

Thank you