Tempo di lettura dell'articolo 1 minuti

Se non stiamo utilizzando frameworks come bootstrap che hanno già incorporato 1000 funzioni e tool diventa difficile avere un anteprima di un link leggibile e chiara. Infatti il title dell’html crea in base al browser un’etichetta spesso poco visibile.

Questo script semplice spiega come creare un tooltip velocemente.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .link-preview {
            position: relative;
        }

        .preview-container {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
    </style>
    <title>Test ToolTip</title>
</head>
<body>
    <a href="https://www.fotoarts.it" class="link-preview" data-preview="Vai al sito, fotoarts.it">www.fotoarts.it</a>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var link = document.querySelector(".link-preview");
            var previewContent = link.getAttribute("data-preview");

            var previewContainer = document.createElement("div");
            previewContainer.classList.add("preview-container");
            previewContainer.innerHTML = previewContent;

            link.appendChild(previewContainer);

            link.addEventListener("mouseover", function() {
                previewContainer.style.display = "block";
            });

            link.addEventListener("mouseout", function() {
                previewContainer.style.display = "none";
            });
        });
    </script>
</body>
</html>

Molto semplice, per comodità come avete visto dal codice ho inserito tutto dentro il file html ma consiglio sempre di staccare il javascript e il css incorporandoli con file esterni.

By : Andrea