Html 可调整大小的图像上的工具提示位置

首先，我不是html/ccs编码方面的专家。 我想使用来自（见下文）的代码片段 但在本例中，工具提示的图像和位置是固定的。在我的例子中，我希望在调整浏览器宽度时调整图像的大小。此外，工具提示必须保持在正确的位置。有什么建议吗

@导入url(http://fonts.googleapis.com/css?family=Roboto:100,400);
*{边距：0；填充：0；}
正文{背景：url(http://img.tapatalk.com/d/12/10/31/6yby7usy.jpg)中心；
}
#容器{背景：url(https://lh3.ggpht.com/PQXITv6h0hTZLqlvlni7RSN2rE70QytYeNAtngBc3wKQuq8g5gH28EUDqYKgCPkWfQ=h900-rw）无重复；
背景尺寸：500px293px；
宽度：500px；
身高：293px；
页边距：25px自动；}
.工具提示{宽度：16px；
高度：16px；
边界半径：10px；
边框：2倍实心#fff；
位置：绝对位置；
背景：rgba（255255255.5）；}
。工具提示：悬停
{-webkit动画播放状态：暂停；}
.tooltip:hover.info{可见性：可见；}
#第一个{margin:200px 0 0 200px！重要；}
#第二{页边距：75px052px！重要；}
#第三{页边距：158px 0 0 425px！重要；}
.info{宽度：200px；
填充：10px；
背景：rgba（255255,1）；
边界半径：3px；
位置：绝对位置；
可见性：隐藏；
利润率：-105px0-100px；
长方体阴影：0 50像素0 rgba（0,0,0,5）；}
h3{字体系列：'Roboto'，无衬线；
字号：100；
字体大小：20px；
边距：0 5px 0；}
字体系列：“机器人”，无衬线；
字体大小：400；
字体大小：12px；}
.阿罗{
位置：绝对位置；
利润率：10px088px；
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px实心#fff；
}

精彩的表演
世界上分辨率最高的7英寸平板电脑可在手掌中放置230多万像素

保持联系
与那些对你来说最重要的人一起分享你的世界

强大的可移植性
提供游戏和应用程序，帮助您获得更多乐趣，完成更多任务

要做到这一点，您只需更改几件事（见下文）：

对背景图像进行少量更改以使其响应：

#container {
    background: url(https://lh3.ggpht.com/PQXITv6h0hTZLqlvlni7RSN2rE70QytYeNAtngBc3wKQuq8g5gH28EUDqYKgCPkWfQ=h900-rw) no-repeat;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 400px;
    margin: 25px auto;
    width: 600px;
    position: relative;
    max-width: 100%;
}

指定每个点的位置：

#first   { 
    left: 5%;
    top: 95px;
 }

#second   { 
    left: 40%;
    top: 235px;
}

#third   {
    left: 90%;
    top: 135px;
}

---

如果我按照Lajon的建议更改代码，当窗口调整大小时，工具提示将定位在正确的左、右位置，但上、下位置不正确，因为图像高度降低了，尽管css中的“顶部”属性在px中是一个常量。请参阅下面的代码。有什么想法吗？谢谢