Как стилизовать DIV подсказки в соответствии с желаемым дизайном? ⇐ CSS

[Anonymous]

Я пытаюсь оформить всплывающую подсказку так, чтобы она соответствовала дизайну на этом изображении:
[img]https://i.sstatic .net/c8AuZgYW.png[/img]

Однако моя текущая реализация выглядит так:


Вот мой текущий код:< /p>

Код: Выделить всё

.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;
}

Код: Выделить всё

Click on a module to edit the learning objectives

Got it

Подробнее здесь: https://stackoverflow.com/questions/793 ... red-design