JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<div class="point" style="top:100px; left:50px;"></div>
<div class="point" style="top:200px; left:150px;"></div>

CSS

.point {
    position:absolute;
    width: 40px;
    height: 40px;
    background-color: #550000;
}

.mapitem-smalldescription {
    position:absolute;
    left:50px;
    width: 100px;
    height: 100px;
    background-color: #00FF00;
    z-index:2;
}

.mapitem-fulldescription {
    position:absolute;
    left:50px;
    width: 200px;
    height: 200px;
    background-color: #FF0000;
    z-index:10;
}
.close{
    position:absolute;
    top:0;
    right:0;
    width:25px;
    height:25px;
    background:#6C9;
    z-index:100;
}

JavaScript

$(".point").live("mouseenter", function() {
    //code to show description
    $(this).append('<div class="mapitem-smalldescription">Small description</div>');
});

$(".point").live("mouseleave", function() {
    //code to show description
    $(".mapitem-smalldescription").fadeOut("normal", function() {
        $(this).remove();
    });
});
$(".point").live("click", function() {
    //code to full description
    $(this).append('<div class="mapitem-fulldescription"><div class="close">x</div>Full description</div>');

});

$(".close").live("click", function(event) {
    //code to close description, dosent work
    event.stopPropagation();
    $(".mapitem-fulldescription").fadeOut("normal", function() {
        $(this).remove();
    });
});