Core Code
Core Code Modern Dev Handbook

Tooltip Delay Effect

Use transition-delay to delay tooltip appearance.

Preview

Code

<style>
.tooltip{
position:relative;
display:inline-block;
}

.tip{
position:absolute;
bottom:120%;
left:50%;
transform:translateX(-50%);
background:#9333ea;
color:white;
padding:5px 8px;
border-radius:4px;
opacity:0;
transition:opacity 0.3s;
transition-delay:0.4s;
}

.tooltip:hover .tip{
opacity:1;
}
</style>

<div class="tooltip">
Hover
<span class="tip">Delayed tooltip</span>
</div>

More CSS Tooltips Examples (8)

example Basic Tooltip open example example Tooltip Top Position open example example Tooltip Bottom Position open example example Tooltip Left Position open example example Tooltip Right Position open example example Tooltip With Arrow open example example Tooltip Fade Animation open example example Tooltip On Button open example