Plain Javascript Tooltip

问题:

Hi i am trying to make tooltip in plain JS which show on hover. Like the one in stackoverflow on hover over the profile name a div is shown.

I tried using onmouseover , onmouseout and added setTimeout to give the user a few seconds to move mouse over the tooltip content. But it was not working as i thought.

I really like pure js more than using any libraries. Can some one help me out?

This is what i did in 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="";
    }

回答1:

Solution with no JavaScript

This uses CSS pseudo hover to set the display of the hidden element. The display none needs to be in the style and not on the element so it can be overwritten in the hover.

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;
}

Example:

jsFiddle

Follow-Up:

If you need to support really old browsers, you would need to add a class to the outside element when the mouse enters the div. And remove that class when mouse leaves.

---

EDIT

Your code did not work because what is tp? Is a collection of elements and you are treating it as one. What you would need to do is pass in the reference to the element

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 */
}

回答2:

Fix for the original code

I was looking for something like this, and i came across this page. It helpd me, but i had to fix your code, for it to work. I think that this is what you tried. You have to refference your objects by their "ID". Here is what I've done, and it works:

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:

Even for $(document).ready, it’s hard to accomplish in pure JS—see here: $(document).ready equivalent without jQuery

So I’m using a simple version:

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/

回答4:

For non-customized tooltip, you can just add the message you want to display in tooltip in the title attribute of the main div. Just like this:

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

Then there is no need to add the onmouseover and onmouseout event handlers.

回答5:

<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>

回答6:

If you're interested in a simple robust option add these few lines of JavaScript to the end of your 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}'
    });
})();

Then add a data-mb-tooltip="your text" to the element you want to show the tooltip when you hover over it.

Then you can style the tooltip however you want using the mb-tooltip in your CSS, (e.g.. mb-tooltip {border:solid gray 1px;})

P.S. You can also put HTML into the mb-tooltip attr.