prévisualisation
HTML
<div class="tooltip-container">
<span class="text">
<svg
xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
class="bi bi-send-fill"
viewBox="0 0 16 16"
>
<path
d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"
></path>
</svg>
</span>
<span class="tooltip1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-twitter"
viewBox="0 0 16 16"
>
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15"
></path>
</svg>
</span>
<span class="tooltip2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-facebook"
viewBox="0 0 16 16"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"
></path>
</svg>
</span>
<span class="tooltip3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-whatsapp"
viewBox="0 0 16 16"
>
<path
d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"
></path>
</svg>
</span>
<span class="tooltip4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-discord"
viewBox="0 0 16 16"
>
<path
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
></path>
</svg>
</span>
<span class="tooltip5">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-pinterest"
viewBox="0 0 16 16"
>
<path
d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0"
></path>
</svg>
</span>
<span class="tooltip6">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8m5.284 3.688a6.8 6.8 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A7 7 0 0 1 8 1.18m-2.907.642A43 43 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.87 6.87 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.82 6.82 0 0 1-1.752-4.564zM8 14.837a6.8 6.8 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.3 28.3 0 0 1 1.457 5.18A6.7 6.7 0 0 1 8 14.837m3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.77 6.77 0 0 1-2.924 4.573z"
></path>
</svg>
</span>
<span class="tooltip7">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-github"
viewBox="0 0 16 16"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
></path>
</svg>
</span>
<span class="tooltip8">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
class="bi bi-reddit"
viewBox="0 0 16 16"
>
<path
d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z"
></path>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165"
></path>
</svg>
</span>
<span class="tooltip9"> </span>
</div>
CSS
.tooltip-container {
background: rgb(3, 169, 244);
background: linear-gradient(
138deg,
rgba(3, 169, 244, 1) 15%,
rgba(63, 180, 233, 1) 65%
);
position: relative;
cursor: pointer;
font-size: 17px;
padding: 0.7em 0.7em;
border-radius: 50px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.tooltip-container:hover {
background: #fff;
transition: all 0.6s;
}
.tooltip-container .text {
display: flex;
align-items: center;
justify-content: center;
fill: #fff;
transition: all 0.2s;
}
.tooltip-container:hover .text {
fill: rgb(3, 169, 244);
transition: all 0.6s;
}
/* Inicio do tooltip twitter */
.tooltip1 {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #03a9f4;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip1 {
top: 150%;
opacity: 1;
visibility: visible;
background: #fff;
border-radius: 50px;
transform: translate(-50%, -5px);
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip1:hover {
background: #03a9f4;
fill: #fff;
}
/* Fim do tooltip twitter */
/* Inicio do tooltip facebook */
.tooltip2 {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #0462df;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip2 {
top: -120%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(-50%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip2:hover {
background: #0462df;
fill: #fff;
}
/* Fim do tooltip facebook */
/* Inicio do tooltip whatsApp */
.tooltip3 {
position: absolute;
top: 100%;
left: 60%;
transform: translateX(80%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #1db954;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip3 {
top: 10%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(85%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip3:hover {
background: #1db954;
fill: #fff;
}
/* Fim do tooltip whatsApp */
/* Inicio do tooltip Discord */
.tooltip4 {
position: absolute;
top: 100%;
left: -190%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #8c9eff;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip4 {
top: 10%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip4:hover {
background: #8c9eff;
fill: #fff;
}
/* Fim do tooltip Discord */
/* Inicio do tooltip pinterest */
.tooltip5 {
position: absolute;
top: 100%;
left: -145%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #bd081c;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip5 {
top: -78%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip5:hover {
background: #bd081c;
fill: #fff;
}
/* Fim do tooltip pinterest */
/* Inicio do tooltip dribbble */
.tooltip6 {
position: absolute;
top: 100%;
left: 35%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #ea4c89;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip6 {
top: -79%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip6:hover {
background: #ea4c89;
fill: #fff;
}
/* Fim do tooltip dribbble */
/* Inicio do tooltip github */
.tooltip7 {
position: absolute;
top: 100%;
left: 39%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #000;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip7 {
top: 104%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip7:hover {
background: #000;
fill: #fff;
}
/* Fim do tooltip github */
/* Inicio do tooltip reddit */
.tooltip8 {
position: absolute;
top: 100%;
left: -150%;
transform: translateX(70%);
opacity: 0;
visibility: hidden;
background: #fff;
fill: #ff4500;
padding: 10px;
border-radius: 50px;
transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tooltip-container:hover .tooltip8 {
top: 101%;
opacity: 1;
visibility: visible;
background: #fff;
transform: translate(70%, -5px);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.tooltip-container:hover .tooltip8:hover {
background: #ff4500;
fill: #fff;
}
/* Fim do tooltip reddit */
/* Inicio do tooltip fixo */
.tooltip9 {
position: absolute;
top: 0;
left: -115%;
opacity: 0;
visibility: hidden;
width: 150px;
height: 150px;
z-index: -1;
}
.tooltip-container:hover .tooltip9 {
top: -110%;
opacity: 1;
visibility: visible;
border-radius: 50%;
z-index: -1;
}
/* Fim do tooltip fixo */
/* Por meio desse ultimo tooltip todos os outros podem
ficar fixos quando houver no principal, para vê-lo dê um
background black acima*/
License MIT
Original author:
Tsiangana
Copyright - 2025 Tsiangana (Tsiangana Zau)
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.