by Guest » 13 Jan 2025, 15:54
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
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:
[img]https://i.sstatic.net/bYKT29Ur.png[/img]
Hier ist mein aktueller Code:
[code].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]
[code]
Click on a module to edit the learning objectives
Got it
[/code]
Mobile version