Added title attribute to better navigation and reading in v-navigation-drawer

[gustavorps]

It is not always possible to have a short title, so I believe that this can contribute to better reading and navigation.

[eugenidev]

Hi, man, there is an interesting variant without editing code project. Try:

Head HTML Injection

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

Body HTML Injection

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script type="text/javascript">
const addTooltip = (element) => {
    if (element.children[1].scrollWidth > element.children[1].clientWidth) {
        element.setAttribute('title', element.textContent);
        element.setAttribute('data-bs-toggle', 'tooltip');
        element.setAttribute('data-bs-placement', 'bottom');
        $('[data-bs-toggle="tooltip"]').tooltip();
    }
}

new MutationObserver((mutations) => {
    for (let mutation of mutations) {
        if (!mutation.addedNodes) return;
        for (let node of mutation.addedNodes) {
            if (!(node instanceof HTMLElement)) continue;
            if (node.matches('.v-main')) {
                [...node.getElementsByClassName('v-list-item')].forEach(addTooltip);
            }
            else if (node.matches('.v-list-item')) {
                addTooltip(node);
            }
        }
    }
})
.observe(document.body, {
    childList: true,
    subtree: true
});
</script>