<style type="text/tailwindcss">
@layer components {
body {
@apply bg-white text-black p-3;
}
.myTooltip {
@apply inline-block relative text-black after:hidden hover:after:block after:absolute after:bg-black after:left-0 after:top-7 after:w-max after:h-auto after:text-white after:p-2 after:px-2.5 after:rounded-md after:text-xs;
}
}
</style>
<span class="myTooltip after:content-['Harvey'] after:!bg-red-600">Harvey</span>
<span class="myTooltip after:content-['Arboleda'] after:!bg-orange-600">Arboleda</span>
<span class="myTooltip after:content-['Hello'] after:!bg-yellow-600">Hello</span>
<span class="myTooltip after:content-['World'] after:!bg-green-600">World</span>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#202225',
secondary: '#5865f2',
gray: {
900: '#202225',
800: '#2f3136',
700: '#36393f',
600: '#4f545c',
400: '#d4d7dc',
300: '#e3e5e8',
200: '#ebedef',
100: '#f2f3f5',
},
clifford: "#da373d"
}
}
}
};
This Pen doesn't use any external CSS resources.