text hover hyper link

Question

I want to display a text as I hover specific divs. When I hover, I get the text on hover, but it flickers. Right now I have that text that appears on two divs(DIV 2 and DIV 3). As I switch from div 2 to div 3, I get the text saying "click me!". But if I keep my cursor on that text "click me!", it starts to flicker.

my onMouseOver and onMouseOut function are

function mouseOverFunc2()
{
    {
        var newDiv = document.createElement("span");
        newDiv.setAttribute("id","id_span");
        newDiv.innerText = " -- click me!";
        div2.appendChild(newDiv);
        console.log(div2);
    }
}

function mouseOverFunc3()
{
    {
        var newDiv = document.createElement("span");
        newDiv.setAttribute("id","id_span");
        newDiv.innerText = " -- click me!";
        div3.appendChild(newDiv);
        console.log(div1);
    }
}

 var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div2.onmouseover = mouseOverFunc2; div2.onmouseout = mouseOutFunc2; div3.onmouseover = mouseOverFunc3; div3.onmouseout = mouseOutFunc3; function mouseOverFunc2() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id","id_span"); newDiv.innerText = " -- click me!"; div2.appendChild(newDiv); console.log(div2); } } function mouseOverFunc3() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id","id_span"); newDiv.innerText = " -- click me!"; div3.appendChild(newDiv); console.log(div1); } } function mouseOutFunc2() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } } function mouseOutFunc3() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } }

 <div id="divv" title="asda"></div> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> <div id="div4">DIV 4</div> <div id="div5">DIV 5</div>

Answer 1

Use mouseenter and mouseleave instead of mouseover and mouseout . the difference?

"Though similar to mouseover, it differs in that it doesn't bubble and that it isn't sent to any descendants when the pointer is moved from one of its descendants' physical space to its own physical space."

 var div2 = document.getElementById("div2"); var div3 = document.getElementById("div3"); div2.onmouseenter = mouseOverFunc2; div2.onmouseleave = mouseOutFunc2; div3.onmouseenter = mouseOverFunc3; div3.onmouseleave = mouseOutFunc3; function mouseOverFunc2() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id", "id_span"); newDiv.innerText = " -- click me!"; div2.appendChild(newDiv); console.log(div2); } } function mouseOverFunc3() { { var newDiv = document.createElement("span"); newDiv.setAttribute("id", "id_span"); newDiv.innerText = " -- click me!"; div3.appendChild(newDiv); console.log(div1); } } function mouseOutFunc2() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } } function mouseOutFunc3() { var node = document.getElementById("id_span"); if (node.parentNode) { node.parentNode.removeChild(node); } }

 <div id="divv" title="asda"></div> <div id="div1">DIV 1</div> <div id="div2">DIV 2</div> <div id="div3">DIV 3</div> <div id="div4">DIV 4</div> <div id="div5">DIV 5</div>

Answer 2

It really sounds like a title attribute would be the best bet, especially in terms of accessibility and cross browser functionality—here are the MDN docs .

However if you want something with more flexibility, I'd consider a using a library such as Tippy