JSFiddle - React, Tailwind, and code Playground

by Billy Moon

HTML

<div style="width:100%" align="center">
    <img   src="http://calibre-ebook.com/site_media//img/windows_logo.jpg" alt="Icons of platforms we support: Windows Linux and MacOS X" border="0" align="middle" usemap="#Map">
    <map name="Map">
        <area shape="rect"  coords="0,0,87,100" href="#Linux" alt="Click here to download Linux version of CloudClient">
        <area shape="rect" coords="88,0,195,100" href="#Windows" alt="Click here to download Windows version of CloudClient">
        <area shape="rect" coords="196,0,300,100" href="#MacOsX" alt="Click here to download MacOsX version of CloudClient">
    </map>
</div>
<div class="WTT">
    tooltipWin
</div>
<div class="LTT">
    tooltipLin
</div>
<div class="MTT">
    tooltipMac
</div>

JavaScript

$('.WTT,.LTT,.MTT').css({
    position: 'absolute'
}).hide()
$('area').each(function(i) {
    $('area').eq(i).bind('mouseover', function(e) {
        $('.WTT,.LTT,.MTT').eq(i).css({
            top: e.pageY,
            left: e.pageX
        }).show()
    })
    $('area').eq(i).bind('mouseout', function() {
        $('.WTT,.LTT,.MTT').hide()
    })
})