web-dev-qa-db-fra.com

Info-bulle Javascript simple

Bonjour, j'essaie de créer une infobulle dans JS, qui apparaît en survol. Comme celui de stackoverflow au survol du nom du profil, un div est affiché. 

J'ai essayé d'utiliser onmouseover, onmouseout et ajouté setTimeout pour donner à l'utilisateur quelques secondes pour passer la souris sur le contenu de l'info-bulle. Mais cela ne fonctionnait pas comme je le pensais. 

J'aime beaucoup plus les JS purs que l’utilisation de librairies. Est-ce que quelqu'un peut m'aider?

C'est ce que j'ai fait dans PURE JS

HTML

<div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME
        <div class = "tooltip">
            PROFILE DETAILS
        </div>
    </div>

    <div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME 2
        <div class = "tooltip" >
            PROFILE DETAILS 2
        </div>
    </div>

    <div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME 3
        <div class = "tooltip" >
            PROFILE DETAILS 3
        </div>
    </div>

CSS

.name{
        float:left;
        margin:100px;
        border:1px solid black;
    }
    .tooltip{
        position:absolute;
        margin:5px;
        width:200px;
        height:100px;
        border:1px solid black;
        display:none;
    }

JS

var name = document.getElementsByclassName("name");
    var tp = document.getElementsByclassName("tooltip");

    function show(){
        tp.style.display="block";
    }
    function hide(){
        tp.style.display="";
    }
javascripttooltip
15
Kishore

Solution sans JavaScript

Ceci utilise un pseudo-survol CSS pour définir l'affichage de l'élément masqué. L'affichage no doit être dans le style et non sur l'élément pour pouvoir être écrasé en survol.

HTML:

<div class="couponcode">First Link
    <span class="coupontooltip">Content 1</span> <!-- UPDATED -->
</div>

<div class="couponcode">Second Link
    <span class="coupontooltip"> Content 2</span> <!-- UPDATED -->
</div>

CSS:

.couponcode:hover .coupontooltip { /* NEW */
    display: block;
}


.coupontooltip {
    display: none;  /* NEW */
    background: #C8C8C8;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
}

.couponcode {
    margin:100px;
}

Exemple:

jsFiddle

Suivre:

Si vous devez prendre en charge de très vieux navigateurs, vous devrez ajouter une classe à l'élément extérieur lorsque la souris entrera dans le div. Et supprimez cette classe lorsque la souris quitte.

MODIFIER

Votre code n'a pas fonctionné car qu'est-ce que tp? Est une collection d’éléments que vous traitez comme un élément. Ce que vous devez faire est de transmettre la référence à l'élément

HTML:

<div class = "name" onmouseover="show(this)" onmouseout="hide(this)">  <!-- added "this" 2 times -->

** JavaScript:

//var name = document.getElementsByclassName("name");  /* not needed */
//    var tp = document.getElementsByclassName("tooltip"); /* not needed */


function show (elem) {  /* added argument */
    elem.style.display="block"; /* changed variable to argument */
}
function hide (elem) { /* added argument */
    elem.style.display="";  /* changed variable to argument */
}
23
epascarello

Correction du code d'origine

Je cherchais quelque chose comme cela et je suis tombé sur cette page… .. Cela m'a aidé, mais je devais corriger votre code, pour que cela fonctionne. Je pense que c'est ce que vous avez essayé ... vous devez référencer vos objets par leur "ID" ... Voici ce que j'ai fait, et ça marche:

HTML

<div class = "name" onmouseover="show(tooltip1)" onmouseout="hide(tooltip1)">
NAME
    <div class = "tooltip" id= "tooltip1">
        PROFILE DETAILS
    </div>
</div>

<div class = "name" onmouseover="show(tooltip2)" onmouseout="hide(tooltip2)">
NAME 2
    <div class = "tooltip" id= "tooltip2">
        PROFILE DETAILS 2
    </div>
</div>

<div class = "name" onmouseover="show(tooltip3)" onmouseout="hide(tooltip3)">
NAME 3
    <div class = "tooltip" id= "tooltip3">
        PROFILE DETAILS 3
    </div>
</div>

CSS

.name{
    float:left;
    margin:100px;
    border:1px solid black;
}
.tooltip{
    position:absolute;
    margin:5px;
    width:200px;
    height:50px;
    border:1px solid black;
    display:none;
}

JS

function show (elem) {  
    elem.style.display="block";
}
function hide (elem) { 
    elem.style.display=""; 
}

http://jsfiddle.net/5qbP3/28/

3
Dede

Pour les info-bulles non personnalisées, vous pouvez simplement ajouter le message que vous souhaitez afficher dans les info-bulles dans l'attribut title de la variable principale div. Juste comme ça:

<div class = "name" onmouseover="show()" onmouseout="hide()" title="PROFILE DETAILS">

Ensuite, il n'est pas nécessaire d'ajouter les gestionnaires d'événements onmouseover et onmouseout.

2
user5445555

Même pour $ (document) .ready, c’est difficile à réaliser en JS pur - voir ici: $ (document) .ready équivalent sans jQuery

J'utilise donc une version simple:

window.addEventListener("load", function () {
    var couponcodes = document.getElementsByClassName("couponcode");
    for (var i = 0; i < couponcodes.length; i++) {
        couponcodes[i].addEventListener("mouseover", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.removeAttribute("style");
        });
        couponcodes[i].addEventListener("mouseout", function () {
            var coupontooltip = this.getElementsByClassName("coupontooltip")[0];
            coupontooltip.style.display = "none";
        });
    }
});

http://jsfiddle.net/mynetx/5qbP3/

2
Jublo

<div class = "name" >
<p title="PROFILE DETAILS">name1</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 2">name2</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 3">name3</p>
</div>
<div class = "name" >
<p title="PROFILE DETAILS 4">Anjan</p>..
</div>

1
Anjan Kumar GJ

Si une option simple et robuste vous intéresse, ajoutez ces quelques lignes de JavaScript à la fin de votre page:

(function(){
    var stylesheet1 = document.createElement('style');
    stylesheet1.innerHTML = 'mb-tooltip {display: none;position: fixed;}[data-mb-tooltip]:hover + mb-tooltip {display: block;}';
    document.head.appendChild(stylesheet1);
    var stylesheet2 = document.createElement('style');
    document.head.appendChild(stylesheet2);
    var tooltipList = document.querySelectorAll('[data-mb-tooltip]');
    for(var i = 0; i < tooltipList.length; i++){
        var tooltipContainer = document.createElement('mb-tooltip');
        tooltipContainer.innerHTML = tooltipList[i].getAttribute('data-mb-tooltip');
        tooltipList[i].parentNode.insertBefore(tooltipContainer, tooltipList[i].nextSibling);
    }
    window.addEventListener('mousemove', function(e){
        stylesheet2.innerHTML = 'mb-tooltip { top: ' + (e.clientY + 18) +'px; left: ' + e.clientX +'px}'
    });
})();

Ajoutez ensuite un data-mb-tooltip="your text" à l'élément pour lequel vous souhaitez afficher l'info-bulle lorsque vous la survolez.

Ensuite, vous pouvez styler l’info-bulle de votre choix à l’aide du mb-tooltip dans votre code CSS (exemple: mb-tooltip {border:solid gray 1px;}).

P.S. Vous pouvez également mettre HTML dans le mb-tooltip attr.

0
Mendy