<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.