JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic"></script>
<div id="map">
    <div class="point" style="left:58.5%;top:32.2%;">
        <div class="info">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>
</div>

CSS

body {
    font-size:12px;
    font-family: 'PT Sans', sans-serif;
}

#map {
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/6/61/Austria_location_map.svg');
    background-size:100% auto;
    width:600px;
    height:334px;
    position:relative;
}

.point {
    border-radius:5px;
    width:10px;
    height:10px;
    position:absolute;
    background:red;
    cursor:pointer;
}

.point .info {
    padding:0 1em;
    position:absolute;
    width:200px;
    left:5px;
    top:5px;
    background:white;
    border:2px solid rgba(0,0,0,0.5);
    display:none;
}

.point:hover .info {
    display:block;
}

h2 {
    font-size:14px;
}