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

[Anonymous]

Я пытаюсь оформить всплывающую подсказку так, чтобы она соответствовала дизайну на этом изображении: [1]:https://ibb.co/q7Z9jFD
Однако моя текущая реализация выглядит так: https://ibb. co/Kqy8MgW
Вот мой текущий код:
HTML:

Click on a module to edit the learning objectives

Got it


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

[1]: https://i.sstatic.net/zOhhxfN5.png
[2]: https://i.sstatic.net/Ta1aEMJj.png
[3]: https://i.sstatic.net/bZmJ3KmU.png


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