Wie gestaltet man einen Tooltip-DIV so, dass er zum gewünschten Design passt? ⇐ HTML

[Guest]

Ich versuche, einen Tooltip so zu gestalten, dass er dem Design in diesem Bild entspricht:
[img]https://i.sstatic .net/c8AuZgYW.png[/img]

Meine aktuelle Implementierung sieht jedoch so aus:


Hier ist mein aktueller Code:

Code: Select all

.tooltip-container {
@apply absolute top-[41%] left-[calc(50%+580px)] transform -translate-x-1/2 -translate-y-1/2 z-10;
@apply p-[16px] w-[220px] border-[1px] border-primary-blue-200 rounded-lg;
}

.tooltip-content {
@apply flex flex-col items-center gap-3;
}

.tooltip-button {
@apply text-sm font-medium rounded-md text-primary-blue ml-auto;
}

.tooltip-text {
@apply text-[14px] font-normal leading-[20px] text-primary-blue-500;
}

Code: Select all

Click on a module to edit the learning objectives

Got it