<details /> provide toggle feature to disaply or hide information.
HTML structure
<details class="tip">
<summary class="tip__summary">
summary'
</summary>
<p class="tip__content">
content
</p>
</details>
Style Customization
Web developers could style <details />.
<style>
.tip {
--mask: path('M22,10l-0.6-1.4L20,8l1.4-0.6L22,6l0.6,1.4L24,8l-1.4,0.6L22,10z M19,6l-0.9-2L16,3l2.1-1L19,0l1,2l2,1l-2,1L19,6z M9,22 c-0.6,0-1-0.2-1.4-0.6S7,20.6,7,20h4c0,0.6-0.2,1-0.6,1.4S9.6,22,9,22z M5,19v-2h8v2H5z M5.2,16c-1.2-0.7-2.1-1.6-2.7-2.8 s-1-2.4-1-3.8c0-2.1,0.7-3.9,2.2-5.3S6.9,2,9,2s3.9,0.7,5.3,2.2s2.2,3.2,2.2,5.3c0,1.4-0.3,2.6-1,3.8s-1.6,2.1-2.7,2.8H5.2z M5.8,14 h6.3c0.8-0.5,1.3-1.2,1.7-2s0.6-1.6,0.6-2.5c0-1.5-0.5-2.8-1.6-3.9S10.5,4,9,4S6.2,4.5,5.1,5.6S3.5,8,3.5,9.5c0,0.9,0.2,1.7,0.6,2.5 S5.1,13.5,5.8,14z');
--text-color: rgba(35 42 49);
--background-color: rgba(255 255 255);
--border-color: rgba(110 119 128);
}
.tip{position:relative;inline-size:3em;aspect-ratio:1/1;display:block;z-index:10000;margin:0 auto;user-select:none;border-radius:3em;}
.tip__summary{--border-radius:3em;position:relative;inline-size:100%;block-size:100%;background-color:transparent;list-style:none;overflow:hidden;color:transparent;outline:0 none;}
.tip__summary::before{position:absolute;inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%, -50%);inline-size:1.5em;block-size:1.5em;content:'';background-color:rgba(255 167 0);clip-path:var(--mask);display:block;}
.tip__content{position:absolute;inset-inline-start:0;inset-block-start:calc(100% + .5em);inline-size:200px;color:var(--text-color);box-sizing:border-box;border-radius:.5em;background-color:var(--background-color);border:1px solid var(--border-color);padding:.75em;box-shadow:var(--shadow-elevations-2);}
.tip--start .tip__content{inset-inline-start:0;}
.tip--center .tip__content{inset-inline-start:50%;transform:translateX(-50%);}
.tip--end .tip__content{inset-inline-start:revert;inset-inline-end:0;}
.tip[open] .tip__content{animation:tip-open 400ms cubic-bezier(.4,0,.2,1) normal;}
@keyframes tip-open {
from {opacity:0;}
to {opacity:1;}
}
@media (prefers-color-scheme: dark) {
.tip {
--text-color: rgba(255 255 255);
--background-color: rgba(35 42 49);
--border-color: rgba(70 78 86);
}
}
</style>