JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<script src="https://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css">
<p>Hover over the image below to learn about different parts of the
    <MadCap:variable name="General.sfdcShort" />interface.</p>
<div class="hoverMap">
    <img class="mapImage" id="AgentInterface" src='https://i.imgur.com/wgY24p7.png' />
    <div class="overlay">
        <a class="mapLink" id="AgentInterface_0" title="Dial pad" href="DialPad" data-myVert="bottom" data-myHori="left" data-atVert="top" data-atHori="right" data-tooltip-offsetX="20" data-offsetY="2" data-atParent="true">Dial pad</a>
        
 <a  data-tooltip-offsetX="20"class="mapLink" id="AgentInterface_1" title="Agents" href="Agents" data-atParent="true">Agents</a><a  data-tooltip-offsetX="20"class="mapLink" id="AgentInterface_2" title="Skills" href="Skills" data-atParent="true">Skills</a>
        <a  data-tooltip-offsetX="20"class="mapLink" id="AgentInterface_3" title="Address Books" href="AddressBook" data-atParent="true">Address Books</a>
        <a class="mapLink" id="AgentInterface_4" title="Contact History" href="ContactHistory" data-atParent="true" data-tooltip-offsetX="20">Contact History</a>
        <a class="mapLink" id="AgentInterface_5" title="Agent Information" href="AgentInformation" data-atParent="true" data-tooltip-offsetX="20">Agent Information</a>
        <a class="mapLink" id="AgentInterface_6" title="AgentLeg" href="AgentLeg" data-tooltip-offsetX="20">AgentLeg</a>
        <a  data-tooltip-offsetX="20"class="mapLink" id="AgentInterface_7" title="Agent State" href="AgentState" data-tooltip-offsetX="20">Agent State</a>
        <a class="mapLink" id="AgentInterface_8"  data-tooltip-offsetX="20" title="Options" href="Options">Options</a>
        <a class="mapLink" id="AgentInterface_9" data-tooltip-offsetX="20" title="Phone Call" href="PhoneCall">Phone Call</a>
        <a class="mapLink" data-tooltip-offsetX="20"...

CSS

body {
    padding: 16px;
}
.hoverMap {
    display: block;
    position: relative;
}
.overlay {
    background:rgba(0, 0, 0, .45);
    opacity:0;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.hoverMap .mapLink {
    display: block;
    position: absolute;
    text-indent: -999em;
    overflow: hidden;
    border: 0;
}
.hoverMap:hover .overlay {
    opacity: 1
}
.hoverMap:hover .mapLink {
    border: 2px solid orange;
    background-image: none;
}
#AgentInterface_0 {
    top: 108px;
    left: 22px;
}
#AgentInterface_1 {
    top: 108px;
    left: 81px;
}
#AgentInterface_2 {
    top: 108px;
    left: 140px;
}
#AgentInterface_3 {
    top: 162px;
    left: 22px;
}
#AgentInterface_4 {
    top: 162px;
    left: 81px;
}
#AgentInterface_5 {
    top: 162px;
    left: 140px;
}
#AgentInterface_6 {
    width: 30px;
    height: 27px;
    top: 0px;
    right: 0px;
}
#AgentInterface_7 {
    width: 200px;
    height: 29px;
    top: 33px;
    left: 0px;
}
#AgentInterface_8 {
    bottom: 4px;
    left: 4px;
}
#AgentInterface_9 {
    bottom: 4px;
    left: 41px;
}
#AgentInterface_10 {
    bottom: 4px;
    left: 80px;
}
#AgentInterface_11 {
    bottom: 4px;
    left: 120px;
}
#AgentInterface_12 {
    bottom: 4px;
    left: 160px;
}
#AgentInterface_8, #AgentInterface_9, #AgentInterface_10, #AgentInterface_11, #AgentInterface_12 {
    height: 28px;
    width: 30px;
}
#AgentInterface_0, #AgentInterface_1, #AgentInterface_2, #AgentInterface_3, #AgentInterface_4, #AgentInterface_5 {
    width: 37px;
    height: 37px;
    border-radius: 5px;
}
.imageMapPop {
    display: none;
}
.popUp {
    font-size: 12pt;
    padding: 8px;
    max-width: 600px;
    max-height: 500px;
    overflow: auto;
    border-radius: 0;
}
.popUp .alert {
    margin: 8px;
}
.popUp table tr {
    border-bottom: 1px solid lightgray;
}
.popUp table td {
    padding: 4px;
}
.popUp...

JavaScript

$(document).ready(function () {
    var h = $('.mapImage').height();
    var w = $('.mapImage').width();
    $('.hoverMap').css({
        'width': w,
            'height': h
    });

    /*
    $('.hoverMap').hover(

      
    function () {
        $('.overlay').css({
            'opacity': 1
        });
    },
    function () {
        $('.overlay').css('opacity', '0');
    });
    */

    $('.mapLink').hover(

    function () {
        bw = parseInt($(this).css('borderLeftWidth'), 10);
        position = $(this).position();
        $(this).css({
            'background-image': 'url(' + $('.mapImage').attr('src') + ')',
                'background-position': 'top -' + (position.top + bw) + 'px' + ' ' + 'left -' + (position.left + bw) + 'px'
        });

    },

    function () {
        $(this).css({
            'background-image': 'none'
        });
    });

    $('.mapLink').each(function () {
        var title = $(this).attr('href');
        //alert($(this).attr('data-tooltip-offsetX'));
       //$(this).qtip('option', 'position.adjust.y', $(this).attr('data-tooltip-offsetY'));
        $(this).qtip({

            prerender: true,
            style: {
                tip: {
                    corner: false
                },
                classes: 'qtip-bootstrap popUp'
            },
            show: {
                solo: true
            },
            events: {
                show: function (event, api) {
                    var $el = $(api.elements.target[0]);
                    $el.qtip('option', 'position.my', ($el.data('tooltip-my-position') === undefined) ? 'bottom left' : $el.data('tooltip-my-position'));
                    $el.qtip('option', 'position.at', ($el.data('tooltip-target-position') === undefined) ? 'top right' : $el.data('tooltip-target-position'));
                    
                    $el.qtip('option', 'position.target', ($el.data('tooltip-atParent') === 'true') ? $('.hoverMap') : $el.data('tooltip-atParent'));
            ...