我正在尝试制作工具提示，但不按我的意愿工作......
编码如下：
@media only screen and (min-width:500px){
#demo{
width: 1000px;
}
.top-icons-path i{
font-size: 40px;
}
}
@media only screen and (max-width:500px){
#demo{
width: 500px;
}
.top-icons-path i{
font-size: 20px;
}
}
#demo {
padding: 5px;
background-color: #fff;
position: relative;
border: 4px solid #10859e;
}
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
bottom: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 9px;
border-bottom-color: #fff;
left: 5px;
}
#demo:before {
border-width: 14px;
border-bottom-color: #10859e;
left: 0px;
}
</style>
<div class="w3-row-padding website-content">
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;right:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-right" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
<div class=" top-icons-path w3-col s1">
<i class="fa fa-arrow-circle-o-right w3-tooltip" aria-hidden="true">
<span style="position:absolute;right:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-right" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
</div>
</div>
我在文件中使用了w3-css http://www.w3schools.com/lib/w3.css 我已经尝试了很多，但它没有正常工作 我想提示一下这个图标，想要排在100％的顶端。我累了很多但不为我工作 请有人帮帮我 非常感谢。
答案 0 :(得分：0)
添加以下类和css以显示工具提示
<i class="fa fa-arrow-circle-o-right icon-class" aria-hidden="true">
<span style="position:absolute;left:0;top:45px;z-index:50000000000; font-size:18px;" class="w3-text w3-round w3-animate-left" id="demo" style="border:1px solid #10859e;">Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text </span>
</i>
.icon-class:hover:after {
content: "Your tooltip";
display: block;
position: relative;
top: -16px;
right: -16px;
width: 100px;
background: lightpink;
}
它可能对你有帮助。