I am trying to style a tooltip <div>
to match the design in this image:
However, my current implementation looks like this:
Here is my current 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;
}
<div className="tooltip-container">
<div className="tooltip-content">
<span className="tooltip-text">Click on a module to edit the learning objectives</span>
<button onClick={onClose} className="tooltip-button">
Got it
</button>
</div>
</div>
Maybe this is not the cleanest way to do it, but it gives the same result, using a ::before, like this:
.tooltip {
position: relative;
padding: 20px;
background-color: #f9faff;
border: 1px solid #cdd4e2;
border-radius: 8px;
color: #2e3b8d;
font-family: Arial, sans-serif;
max-width: 300px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
margin-left: 30px;
}
.tooltip::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%) translateX(-2px) rotate(45deg);
background-color: #f9faff;
border-top: transparent 1px solid;
border-left: #cdd4e2 1px solid;
border-right: transparent 1px solid;
border-bottom: #cdd4e2 1px solid;
border-bottom-left-radius: 3px;
}
.got-it {
display: block;
margin-top: 10px;
color: #2e73ff;
font-weight: bold;
cursor: pointer;
}
<div class="tooltip">
Click on a module to edit the learning objectives
<span class="got-it">Got it</span>
</div>