prévisualisation
-
Support
HTML
<div class="spm-tooltip-wrapper">
<ul class="spm-tooltip-container">
<li style="--i: 1.1s" class="spm-nav-link">
<div class="spm-tooltip-tab">
<svg
xmlns="http://www.w3.org/2000/svg"
style="fill:none;"
fill="none"
viewBox="0 0 16 16"
height="16"
width="16"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke="#ffffff"
d="M1 10V8C1 2.5 6 1 8 1C10 1 15 2.5 15 8V10M1 10C1 10.5552 1 11.1543 1.0984 11.6204C1.24447 12.3122 2 13 3 13C4 13 4.75553 12.3122 4.9016 11.6204C5 11.1543 5 10.5552 5 10C5 9.44485 5 8.84565 4.9016 8.37961C4.75553 7.68776 4 7 3 7C2 7 1.24447 7.68776 1.0984 8.37961C1 8.84565 1 9.44485 1 10ZM15 10C15 10.5552 15 11.1543 14.9016 11.6204C14.7555 12.3122 14 13 13 13C12 13 11.2445 12.3122 11.0984 11.6204C11 11.1543 11 10.5552 11 10C11 9.44485 11 8.84565 11.0984 8.37961C11.2445 7.68776 12 7 13 7C14 7 14.7555 7.68776 14.9016 8.37961C15 8.84565 15 9.44485 15 10ZM15 10C15 15.5 12.5 15 8 15"
></path>
</svg>
Support
</div>
<div class="spm-tooltip">
<ul class="spm-tooltip-menu-with-icon">
<li class="spm-tooltip-link">
<a class="spm-tooltip-links" href="#">
<svg aria-hidden="true" role="img" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="m4.6.7 1.6 1.7c.6.6.7 1.6 0 2.2C5 6.1 5 6.4 7.2 8.7c2.4 2.4 2.7 2.4 4.2 1 .6-.5 1.6-.5 2.2 0l1.7 1.7v.1c.6.5.6 1.5 0 2.1v.1c-1.4 1.4-2.5 2-3.8 2h-.7c-1.6-.3-3.4-1.6-6.1-4.4C-.5 6.1-1 4 2.3.7 2.9.1 3.9.1 4.6.7m-1.2.4c-.2 0-.4.1-.5.3C.1 4 .5 5.9 5.3 10.7s6.6 5.2 9.3 2.4l.2.1-.2-.1c.3-.3.3-.7.1-1L13 10.4a.7.7 0 0 0-1 0c-1.9 1.8-2.7 1.6-5.3-1C4 6.6 3.8 5.8 5.6 4c.3-.3.3-.7 0-1L3.9 1.3a.7.7 0 0 0-.5-.2" fill-rule="evenodd" fill="#FFF"></path>
</svg>
000-000-1111
</a>
</li>
<li class="spm-tooltip-link">
<a class="spm-tooltip-links" href="#">
<svg aria-hidden="true" role="img" viewBox="0 0 13.971 13.971" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<g id="support-clock_svg__clock">
<path d="M6.985 13.97a6.985 6.985 0 1 1 6.986-6.985 6.993 6.993 0 0 1-6.986 6.986zm0-13.47a6.485 6.485 0 1 0 6.486 6.485A6.493 6.493 0 0 0 6.985.5" fill="#FFF"></path>
<path d="M11.1 7.235H6.986a.25.25 0 0 1-.25-.25V1.972a.25.25 0 1 1 .5 0v4.763h3.866a.25.25 0 0 1 0 .5z" fill="#FFF"></path>
</g>
</svg>
8:30AM - 5PM PST
</a>
</li>
<li class="spm-tooltip-link">
<a class="spm-tooltip-links" href="#">
<svg aria-hidden="true" role="img" viewBox="0 0 18.2 13.342" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path style="fill:#fff" d="M17.9 0H.3a.3.3 0 0 0-.3.3v12.742a.3.3 0 0 0 .3.3h17.6a.3.3 0 0 0 .3-.3V.3a.3.3 0 0 0-.3-.3M.85.5h16.554L9.101 6.364Zm6.983 5.576 1.124.799a.25.25 0 0 0 .29 0l1.527-1.08-.133.13 6.719 6.917H.956ZM.5 12.59V.867l6.918 4.915Zm10.533-6.978L17.7.902v11.574ZM.539.5.5.554V.5Z"></path>
</svg>
uiverse.io
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS
.spm-tooltip-wrapper {
--clr-btn: rgb(2 22 36);
--clr-dropdown: rgb(2 22 36);
--clr-nav-hover: rgb(2 22 36);
--clr-dropdown-hov: rgb(2 22 36);
--clr-dropdown-link-hov: rgb(2 22 36);
--clr-light: #ffffff;
}
.spm-nav-link {
position: relative;
}
.spm-tooltip-wrapper > .spm-tooltip-container {
display: flex;
justify-content: space-around;
align-items: center;
}
.spm-tooltip-container,
.spm-tooltip-menu-with-icon {
list-style: none;
}
.spm-nav-link > .spm-tooltip-tab {
color: var(--clr-light);
background: var(--clr-btn);
padding: 0.8rem 1rem;
letter-spacing: 1px;
font-size: 0.75rem;
display: flex;
align-items: center;
column-gap: 12px;
justify-content: space-between;
text-transform: uppercase;
cursor: pointer;
border: 1px solid #00c1d5;
transition: 0.3s ease-in-out;
}
.spm-nav-link > .spm-tooltip-tab:hover svg {
transform: rotate(360deg);
transition: 0.3s ease-in-out;
}
.spm-tooltip-links {
text-decoration: none;
}
.spm-nav-link svg {
fill: #fff;
}
.spm-tooltip {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
max-width: 15rem;
transform: translateY(10px);
opacity: 0;
pointer-events: none;
transition: 0.5s;
padding: 15px 0px 0px 0px;
}
.spm-tooltip::after {
content: "";
width: 15px;
height: 15px;
background: #00c1d5 no-repeat -30px -50px fixed;
top: 0px;
left: 6%;
position: absolute;
display: inline-block;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform: rotate(360deg);
z-index: -1;
box-shadow: 0px 6px 30px rgb(2 22 36);
}
.spm-tooltip .spm-tooltip-menu-with-icon {
padding: 10px 0px;
background-color: var(--clr-dropdown);
border: 1px solid #00c1d5;
position: relative;
}
.spm-tooltip-link {
position: relative;
}
.spm-tooltip-link:not(:nth-last-child(2)) {
border-bottom: 1px solid var(--clr-dropdown);
}
.spm-tooltip-link > a {
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: 10px;
background-color: var(--clr-dropdown);
color: var(--clr-light);
padding: 0.5rem 1rem;
font-size: 0.75rem;
transition: 0.3s;
}
.spm-tooltip-menu-with-icon svg {
height: 20px;
margin-left: 0px;
}
.spm-nav-link:hover > .spm-tooltip-tab {
transform: scale(1.1);
}
.spm-nav-link:hover > .spm-tooltip,
.spm-tooltip-link:hover > .spm-tooltip {
transform: translate(0, 0);
opacity: 1;
pointer-events: auto;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
}
.spm-nav-link:hover > .spm-tooltip-tab {
transform: scale(1);
background-color: var(--clr-nav-hover);
}License MIT
Original author:
3HugaDa3
Copyright - 2025 3HugaDa3 (Daniil)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.