Tooltip In Pure Js

I am trying this code but i get: document.getElementsByName(...).style is undefined I have also a problem with the delegation, i think. Any help?

Solution 1:

Try changing the id toolTip to a class:

<divclass="toolTip">...</div>

And change your JS to use the display style-thing, rather than visibility, nd the onmouseover's are best dealt with using JS event delegation:

functionload()
{
    var i, tooltips = document.getElementsByClassName('toolTip'),
    mouseOver = function(e)
    {//handler for mouseover
        e = e || window.event;
        var i, target = e.target || e.srcElement,
        targetToolTip = target.nextElementSibling || nextSibling;//gets the next element in DOM (ie the tooltip)//check if mouse is over a relevant element:if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/))
        {//nope? stop here, thenreturn e;
        }
        targetToolTip.style.display = 'block';//make visiblefor (i=0;i<tooltips.length;i++)
        {//closures are neat --> you have a reference to all tooltip elements from load scopeif (tooltips[i] !== targetToolTip)
            {//not the one you need to see
                tooltips[i].style.display = 'none';
            }
        }
    };
    for (i=0;i<tooltips.length;i++)
    {
        tooltips[i].style.display = 'none';
    }
    //add listener:if (document.body.addEventListener)
    {//IE > 9, chrome, safari, FF...document.body.addEventListener('mouseover',mouseOver,false);
    }
    else
    {//IE8document.body.attachEvent('onmouseover',mouseOver);
    }
}

Google JavaScript event delegation and closures if this code isn't clear, but that's just how I would tackle this kind of thing. IMO, it's fairly efficient (you could use the closure scope to keep track of the tooltip that's currently visible and not loop through all of them, too, that would be even better:

functionload()
{
    var i, tooltips = document.getElementsByClassName('toolTip'),
    currentToolTip,//<-- reference currently visible
    mouseOver = function(e)
    {
        e = e || window.event;
        var i, target = e.target || e.srcElement,
        targetToolTip = target.nextElementSibling || nextSibling;

        if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip)
        {//add check for currently visible TT, if so, no further action requiredreturn e;
        }
        if (currentToolTip !== undefined)
        {
            currentToolTip.style.display = 'none';//hide currently visible
        }
        targetToolTip.style.display = 'block';//make new visible
        currentToolTip = targetToolTip;//keep reference for next event
    };
    for (i=0;i<tooltips.length;i++)
    {
        tooltips[i].style.display = 'none';
    }
    if (document.body.addEventListener)
    {
        document.body.addEventListener('mouseover',mouseOver,false);
    }
    else
    {
        document.body.attachEvent('onmouseover',mouseOver);
    }
}

And you're there.

Edit: To hide the tooltip on mouseout, you can either add a second listener directly:

functionload()
{
    var i, tooltips = document.getElementsByClassName('toolTip'),
    currentToolTip,//<-- reference currently visible
    mouseOver = function(e)
    {
        e = e || window.event;
        var i, target = e.target || e.srcElement,
        targetToolTip = target.nextElementSibling || nextSibling;

        if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip)
        {//add check for currently visible TT, if so, no further action requiredreturn e;
        }
        if (currentToolTip !== undefined)
        {
            currentToolTip.style.display = 'none';//hide currently visible
        }
        targetToolTip.style.display = 'block';//make new visible
        currentToolTip = targetToolTip;//keep reference for next event
    },
    mouseOut = function(e)
    {
        e = e || window.event;
        var movedTo = document.elementFromPoint(e.clientX,e.clientY);//check where the cursor is NOWif (movedTo === curentToolTip || currentToolTip === undefined)
        {//if cursor moved to tooltip, don't hide it, if nothing is visible, stopreturn e;
        }
        currentTooltip.style.display = 'none';
        currentTooltip = undefined;//no currentToolTip anymore
    };
    for (i=0;i<tooltips.length;i++)
    {
        tooltips[i].style.display = 'none';
    }
    if (document.body.addEventListener)
    {
        document.body.addEventListener('mouseover',mouseOver,false);
        document.body.addEventListener('mouseout',mouseOut,false);
    }
    else
    {
        document.body.attachEvent('onmouseover',mouseOver);
        document.body.attachEvent('onmouseout',mouseOut);
    }
}

Note, this is completely untested. I'm not entirely sure if IE < 9 supports elementFromPoint (gets the DOM element that is rendered at certain coordinates), or even if the IE event object has the clientX and clientY properties, but I figure a quick google will tell you more, including how to get the coordinates and the element that is to be found under the cursor in old, crummy, ghastly IE8, but this should help you on your way. Of course, if you don't want the contents of the tooltip to be selectable, just change the mouseOut function to:

mouseOut = function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (currentToolTip)
    {
        currentToolTip.style.diplay = 'none';
        currentToolTip = undefined;
    }
};

No need to check if the mouseout was on the correct element, just check if there is a current tooltip, and hide it.

Solution 2:

Try using classes to mark the tooltips:

<divid="toolTip1"class="toolTip"><p>i can haz css tooltip</p><divid="tailShadow"></div><divid="tail1"></div><divid="tail2"></div></div>

And JQuery to toggle the visibility using the class as the selector:

$('.toolTip').attr('visibility', 'hidden')

Definitely clean up the non-unique Id's - this will cause you no end of troubles otherwise

Solution 3:

Your problem is likely because you're using the same id for both the tooltips. This is invalid; an id should be unique -- only one element in a given page should have a specific ID.

If you need a shared identifier for multiple objects, use a class instead.