mirror of
https://github.com/CodeF53/personal-site.git
synced 2024-09-20 06:10:34 +00:00
refactor tooltips
This commit is contained in:
parent
957003c599
commit
c3be840535
3 changed files with 37 additions and 34 deletions
10
index.html
10
index.html
|
|
@ -28,23 +28,23 @@
|
|||
</div>
|
||||
<div id="links-contact" class="panel">
|
||||
<h2>Links and Contact</h2>
|
||||
<a href="mailto:fseusb@gmail.com" class="button tooltip" tt-title="email">
|
||||
<a href="mailto:fseusb@gmail.com" class="button" tooltip="email">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z"/></svg>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/CodeF53" class="button tooltip" tt-title="github">
|
||||
<a href="https://github.com/CodeF53" class="button" tooltip="github">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
|
||||
</a>
|
||||
|
||||
<a href="https://modrinth.com/user/F53" class="button tooltip" tt-title="modrinth<br>(minecraft mods)">
|
||||
<a href="https://modrinth.com/user/F53" class="button" tooltip="modrinth<br>(minecraft mods)">
|
||||
<svg viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg"><!--! https://github.com/modrinth/knossos/blob/master/assets/images/logo.svg !--><path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z"/><path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z"/></svg>
|
||||
</a>
|
||||
|
||||
<div id="discord-toggle" class="button tooltip" tt-title="discord">
|
||||
<div id="discord-toggle" class="button" tooltip="discord">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
|
||||
</div>
|
||||
|
||||
<a href="https://dev.to/f53" class="button tooltip" tt-title="blog">
|
||||
<a href="https://dev.to/f53" class="button" tooltip="blog">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H256C273.7 32 288 46.33 288 64C288 81.67 273.7 96 256 96zM256 352H32C14.33 352 0 337.7 0 320C0 302.3 14.33 288 32 288H256C273.7 288 288 302.3 288 320C288 337.7 273.7 352 256 352zM0 192C0 174.3 14.33 160 32 160H416C433.7 160 448 174.3 448 192C448 209.7 433.7 224 416 224H32C14.33 224 0 209.7 0 192zM416 480H32C14.33 480 0 465.7 0 448C0 430.3 14.33 416 32 416H416C433.7 416 448 430.3 448 448C448 465.7 433.7 480 416 480z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
50
index.js
50
index.js
|
|
@ -90,33 +90,33 @@ addEventListener('DOMContentLoaded', (event) => {
|
|||
}
|
||||
})
|
||||
|
||||
// tooltip
|
||||
tooltip = document.createElement("span");
|
||||
tooltip.style.visibility = "hidden"
|
||||
tooltip.classList = ["title"]
|
||||
// Make our tooltip
|
||||
let tooltip = document.createElement("span")
|
||||
tooltip.id = "tooltip"
|
||||
document.body.appendChild(tooltip)
|
||||
|
||||
function onHoverToggleTooltip( e ) {
|
||||
tooltip.style.top = e.pageY/*-(tooltip.offsetHeight/2)*/+"px"
|
||||
tooltip.style.left = e.pageX/*-(tooltip.offsetWidth/2)*/+"px"
|
||||
|
||||
switch(e.type) {
|
||||
case "mouseenter":
|
||||
tooltip.innerHTML = this.getAttribute("tt-title")
|
||||
tooltip.style.visibility = "visible"
|
||||
break;
|
||||
case "mouseleave":
|
||||
tooltip.style.visibility = "hidden"
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(document.querySelectorAll(".tooltip"))
|
||||
document.querySelectorAll(".tooltip").forEach(element => {
|
||||
element.addEventListener("mouseenter", onHoverToggleTooltip)
|
||||
element.addEventListener("mouseleave", onHoverToggleTooltip)
|
||||
element.addEventListener("mousemove", onHoverToggleTooltip)
|
||||
// add event listeners to elements that have a tooltip
|
||||
document.querySelectorAll("[tooltip]").forEach(element => {
|
||||
element.addEventListener("mouseenter", updateTooltip)
|
||||
element.addEventListener("mouseleave", updateTooltip)
|
||||
element.addEventListener("mousemove", updateTooltip)
|
||||
})
|
||||
function updateTooltip(mouseEvent) {
|
||||
// Move tooltip to our current cursor position
|
||||
tooltip.style.top = mouseEvent.pageY+"px"
|
||||
tooltip.style.left = mouseEvent.pageX+"px"
|
||||
|
||||
switch(mouseEvent.type) {
|
||||
case "mouseenter":
|
||||
// update text and show tooltip when we hover
|
||||
tooltip.innerHTML = this.getAttribute("tooltip")
|
||||
tooltip.style.visibility = "visible"
|
||||
break;
|
||||
case "mouseleave":
|
||||
// hide the tooltip when we are no longer above a tooltip element
|
||||
tooltip.style.visibility = "hidden"
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// stop buttons being draggable
|
||||
window.ondragstart = function() {return false}
|
||||
|
|
|
|||
11
style.css
11
style.css
|
|
@ -116,14 +116,17 @@ p a { color: aliceblue; }
|
|||
display: none!important;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute; /* must have this */
|
||||
#tooltip {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 100; /* anything higher than the highest z index you use */
|
||||
visibility: hidden;
|
||||
|
||||
/* actual styling */
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
padding: 0.5em;
|
||||
border-radius: 1em;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
Loading…
Reference in a new issue