<div id="container">
<div class="tooltip" id="first">
<div class="info">
<h3>Awesome Display</h3>
<p>The world's highest-resolution 7" tablet puts over 2.3 million pixels in the palm of your hand. </p>
<div class="arrow"></div>
</div>
</div>
<div class="tooltip" id="second">
<div class="info">
<h3>Stay Connected</h3>
<p>Hangout and share your world with those that matter the most to you in glorious high definition. </p>
<div class="arrow"></div>
</div>
</div>
<div class="tooltip" id="third">
<div class="info">
<h3>Powerful Portability</h3>
<p>Delivering the game and applications that help you have more fun and get more done. </p>
<div class="arrow"></div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:100,400);
* { margin:0; padding:0;}
body { background:url(http://img.tapatalk.com/d/12/10/31/6yby7usy.jpg) center center;
}
#container { background:url(https://lh3.ggpht.com/PQXITv6h0hTZLqlvlni7RSN2rE70QytYeNAtngBc3wKQuq8g5gH28EUDqYKgCPkWfQ=h900-rw) no-repeat;
background-size:500px 293px;
width:500px;
height:293px;
margin:25px auto;}
.tooltip { width:16px;
height:16px;
border-radius:10px;
border:2px solid #fff;
position:absolute;
background:rgba(255,255,255,.5);}
.tooltip:hover
{ -webkit-animation-play-state: paused;}
.tooltip:hover .info {visibility:visible;}
#first { margin: 200px 0 0 200px !important;}
#second { margin:75px 0 0 52px !important;}
#third { margin:158px 0 0 425px !important;}
.info { width:200px;
padding:10px;
background:rgba(255,255,255,1);
border-radius:3px;
position:absolute;
visibility:hidden;
margin:-105px 0 0 -100px;
box-shadow:0 0 50px 0 rgba(0,0,0,.5);}
h3 { font-family: 'Roboto', sans-serif;
font-weight:100;
font-size:20px;
margin:0 0 5px 0;}
p { font-family: 'Roboto', sans-serif;
font-weight:400;
font-size:12px;}
.arrow {
position:absolute;
margin:10px 0 0 88px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.