Tooltips in place of static titles

[jmain33]

Hello to you Victor and the other fellow devs.
I spent some time learning and tinkering with CSS to include tooltip display into Bonjourr. I ended up very happy with the results and intended to submit the code for possible inclusion on your doc's snippets page, until I ran into a huge issue; the audits I made cause rearrangement of quick links to be nearly impossible (they fan out dramatically when dragged around). I've distinguished the funky behavior to be due to the fact that tooltips require the host element to have it's position set to "relative" while being displayed "inline-block". Seeing as this isn't avoidable there isn't likely an easy fix through CSS alterations.

I've included the CSS coding I used so you all can see for yourselves exactly what I did, and how it effects the dragging of links:

/* Tooltip functionality */
#linkblocks.large li.block {
    position: relative;
    display: inline-block;
}
/* Alter the backdrop of Quick Links icons */
#linkblocks.large li.block div, li.block.folder div {
    border-radius: .8em;
    border-width: 1.1px;
    border-color: #fff9;
  	background: #fff7;
  	box-shadow: unset;
}
#linkblocks.large li.block div:hover {
    box-shadow: 0 0 12px 2.2px #70CEFF;
}
#linkblocks.large li.block img {
    border-radius: .4em;
}
/* End of Quick Link backdrop alterations */
#linkblocks.large li.block span {
    position: absolute;
    visibility: hidden;
    min-width: 133%;
    border: 2.4px solid #008ECC;
    border-radius: 10px;
    background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,.9), rgba(0,0,0,.9), rgba(0,0,0,.8), rgba(0,0,0,.8), rgba(0,0,0,.7));
    color: #fff;
    text-align: center;
    letter-spacing: .05em;
    padding: .9em .1em .8em .4em;
    line-height: 1.5em;
    z-index: 1;
    top: 116%;
    left: 35%;
    margin-left: -3.7em;
    opacity: 0;
    transition: opacity 1.2s;
    transition-delay: .8s;
}
#linkblocks.large li.block span::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    margin-left: -10px;
    border-width: 13px;
    border-style: solid;
    border-color: #008ECC9C transparent transparent transparent;
    z-index: 2;
}
#linkblocks.large li.block:hover span {
    visibility: visible;
    opacity: 1;
}
#link-list {
    padding: 3em 3em;
}
#linkblocks {
    --row-gap: 2em;
}
/* End of tooltip functionality */

Don't consider this to be a feature request or bug report. This topic is just to make you aware that such a mechanism might be useful; with the new paging possibility, removing the titles and having them appear when hovered keeps everything neatly aligned when switching pages - plus allows for untruncated titles. There's just a conflict in what the links require to move about and what I'm trying to do. For now, I temporarily disable the problematic line of CSS (the first block) whenever I need to change the links around.

Have a nice one , bonjour.