<span class="info-tip">
  <p popover id="info-tip-content">Hey Hi Hellooooo</p>
  <button popovertarget="info-tip-content" class="info-tip-button">
  <span class="info-tip-button__label">Click for more info</span>
  <span class="info-tip-button__icon">
    <svg viewBox="0 0 512 512" width="100" title="info-circle">
      <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" />
    </svg>
  </span>
</button>
</span>
@import "https://unpkg.com/open-props";

.info-tip {
  /* Tooltip shape generated by: https://css-shape.com */
  
  --b: 2em;
  --h: 1em;
  --p: 50%;
  --bg: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
  
  position: relative;
}


#info-tip-content {
  animation: var(--animation-slide-in-up) forwards;
  padding: 1em;
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--b)/2) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 0);
  border-image: fill 0//var(--h)
    conic-gradient(orangered 0 0); /* the color */
  color: currentcolor;
  font-size: 18px;
  inset-block-start: 150px;
  max-width: 28ch;
  position: relative;
  text-align: center;
}

.info-tip-button {
  align-items: center;
  background: none;
  border: 0;
  color: currentcolor;
  display: inline-flex;
  font-family: inherit;
  font-size: 1.5rem;
  gap: 1rem;
  position: relative;
}

.info-tip-button__icon {
  position: relative;

  svg {
    background: #fff;
    border-radius: 50%;
    max-inline-size: 50px;
    position: relative;
    z-index: 1;
  }

  &::before {
    aspect-ratio: 1;
    background: linear-gradient(
      130deg,
      #ff7a18,
      #af002d 41.07%,
      #319197 76.05%
    );
    border-radius: 50%;
    content: "";
    inset-block-end: 5px;
    position: absolute;
    width: 100%;
  }
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
    font-size: 24px;
  }

  body {
    color: #fff;
    display: grid;
    font-family: "Freeman", sans-serif;
    min-height: 100dvh;
    place-items: center;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.