cssstylesborder

How to Style a Tooltip DIV to Match the Desired Design?


I am trying to style a tooltip <div> to match the design in this image: https://ibb.co/q7Z9jFD

However, my current implementation looks like this: https://ibb.co/Kqy8MgW

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>


Solution

  • 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>