JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<br/>
<div id="taille"></div>
<br/>
<nav class="menu ">
    <ul id="navigation">
        <div id="curseur" class="infobulle"></div>
        <li><a href="index.php" onMouseOver="montre('Accueil du site')" onMouseOut="cache();">Accueil</a>
        </li>
        <li><a href="recettes.php" onMouseOver="montre('Pour retrouver <br/>toutes les recettes')" onMouseOut="cache();">Recettes</a>
        </li>
        <li><a href="inscription.php" onMouseOver="montre('Inscription pour pouvoir <br/>poster des commentaires<br/>sur les recettes')" onMouseOut="cache();">Inscription</a>
        </li>
        <li><a href="connection.php" onMouseOver="montre('Permet de se connecter au site <br/>Accéder à toutes les fonctions du site')" onMouseOut="cache();">Connexion</a>
        </li>
        <li><a href="deconnection.php" onMouseOver="montre('Permet de se déconnecter du site')" onMouseOut="cache();">Déconnection</a>
        </li>
    </ul>
</nav>

CSS

nav {
    margin-top:50px;
}
/*style pour l'info bulle*/
 .infobulle {
    position: absolute;
    visibility : hidden;
    border: 1px solid Black;
    padding: 10px;
    font-family: Verdana, Arial;
    font-size: 10px;
    background-color: #FFFFCC;
}
#curseur {
    background-color:#FDBFB7;
    color:#FF007F;
    border: 1px #FF007F solid;
    border-radius: 8px;
}
/*------------------------------*/

/*menu navigation*/
 #navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
#navigation li {
    display: inline-block;
    margin-right: 1px;
    color: #fff;
    background-color: #c00;
}
#navigation li a {
    padding: 4px 20px;
    background-size: 180px 30px;
    background-color: #F400A1;
    color: #fff;
    border: 5px outset #FF69B4;
    border-radius:10px;
    font: 1em"Trebuchet MS", Arial, sans-serif;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
    background-color: #900;
    text-decoration: underline;
    border: 5px outset #C60800;
}
#navigation span {
    background-color:#CFA0E9;
    padding-left:1%;
    padding-right:1%;
    border-radius:10px;
    color:#FFF;
}
@media only screen and (max-width : 660px) {
    .menu {
        text-align:left;
    }
    .menu {
        display:block;
        cursor:pointer;
        color:#fff;
        padding:16px;
        font-size:0.98em;
        font-weight:bold;
        background: rgb(244, 0, 161) url('images/menu.svg') 99% 1% no-repeat;
    }
    .menu ul li a, .responsive_menu ul li {
        display:block;
    }
    .menu ul {
        display:none;
    }
    .menu:hover ul {
        display: block;
    }
    .menu ul:hover li {
        width:90%;
    }
    #navigation li a {
        border-radius: 0;
    }
}

JavaScript

$(document).ready(function () {
    $(window).resize(function () {
        var w = $(window).width();
        $("#taille").html(w);
    });
});

function GetId(id) {
    return document.getElementById(id);
}
var i = false;
// La variable i nous dit si la bulle est visible ou non

function move(e) {
    if (i) {
        // Si la bulle est visible, on calcul en temps reel sa position ideale
        if (navigator.appName != "Microsoft Internet Explorer") {
            // Si on est pas sous IE
            GetId("curseur").style.left = e.pageX + 5 + "px";
            GetId("curseur").style.top = e.pageY + 10 + "px";
        } else {
            if (document.documentElement.clientWidth > 0) {
                GetId("curseur").style.left = 20 + event.x + document.documentElement.scrollLeft + "px";
                GetId("curseur").style.top = 10 + event.y + document.documentElement.scrollTop + "px";
            } else {
                GetId("curseur").style.left = 20 + event.x + document.body.scrollLeft + "px";
                GetId("curseur").style.top = 10 + event.y + document.body.scrollTop + "px";
            }
        }
    }
}

function montre(text) {
    if (i === false) {
        GetId("curseur").style.visibility = "visible"; // Si il est cacher (la verif n'est qu'une securite) on le rend visible.
        GetId("curseur").innerHTML = text; // on copie notre texte dans l'element html
        i = true;
    }
}

function cache() {
    if (i === true) {
        GetId("curseur").style.visibility = "hidden"; // Si la bulle est visible on la cache
        i = false;
    }
}
document.onmousemove = move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.