mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
99 lines
No EOL
2.6 KiB
HTML
99 lines
No EOL
2.6 KiB
HTML
<div class="tooltip-wrapper">
|
|
<button class="tooltip-button">
|
|
<span class="tooltip-text">Hover me</span>
|
|
</button>
|
|
<div class="tooltip-content">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path
|
|
d="M13 13h-2v-2h2v2zm0 4h-2v-2h2v2zm1-18h-8v2h8v-2zm0 20h-8v-2h8v2zm5.5-7h-2v-2h2v2zm-7 0h-2v-2h2v2zm1-10h-2v6h2v-6zm6.5 5.5h-1.5v1.5h1.5v-1.5zM4.5 16.5h1.5v1.5h-1.5v-1.5zm12-5h-2v-2h2v2zm-4 4h-2v-2h2v2zm5-3h-2v-2h2v2zm-7 0h-2v-2h2v2zm-3-5h-2v2h2v-2zm-4 8.5h1.5v1.5h-1.5v-1.5zm4.5-12h-2v2h2v-2zm10 1h-2v2h2v-2zm-7 3h-2v2h2v-2zm6 5h-2v-2h2v2zm-7-6h-2v-2h2v2zM6 13H4v-2h2v2zm12 6h-2v-2h2v2zM9 4H7v2h2V4zm11 0h-2v2h2V4z"
|
|
></path>
|
|
</svg>
|
|
Uiverse.io
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by kyle1dev - Tags: tooltip */
|
|
.tooltip-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.tooltip-wrapper .tooltip-content {
|
|
visibility: hidden;
|
|
background: linear-gradient(to right, #000, #333);
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(10px);
|
|
opacity: 0;
|
|
transition:
|
|
visibility 0s linear 0.4s,
|
|
opacity 0.4s ease,
|
|
transform 0.4s ease;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.tooltip-wrapper:hover .tooltip-content {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
transition-delay: 0s;
|
|
}
|
|
.tooltip-wrapper:not(:hover) .tooltip-content {
|
|
visibility: visible;
|
|
transition-delay: 0s, 0.4s;
|
|
}
|
|
.tooltip-button {
|
|
background: linear-gradient(to right, #333, #000);
|
|
border: none;
|
|
color: white;
|
|
padding: 15px 30px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition:
|
|
background 0.3s ease,
|
|
box-shadow 0.3s ease;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.tooltip-button:hover {
|
|
background: linear-gradient(to right, #000, #333);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
|
|
}
|
|
.tooltip-button:active {
|
|
background: #222;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
transform: scale(0.95);
|
|
}
|
|
.tooltip-button .tooltip-text {
|
|
position: relative;
|
|
display: inline-block;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
.tooltip-button:hover .tooltip-text {
|
|
transform: translateY(-10px);
|
|
}
|
|
.tooltip-content svg {
|
|
fill: #fff;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
</style>
|
|
|