mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
456 lines
No EOL
15 KiB
HTML
456 lines
No EOL
15 KiB
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>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Tsiangana - Tags: tooltip, hover, social media, creative, advanced */
|
|
/* This is an example, feel free to delete this code */
|
|
.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*/
|
|
|
|
</style>
|
|
|