CSS bootstrap悬停工具提示不会工作
问题描述:
我想用CSS创建一个段落中的单词悬停弹出/工具提示 - 它在一定程度上工作,但问题是它在该段落留下很大的空白 - 请帮帮我吧,我在这里失去了意志......CSS bootstrap悬停工具提示不会工作
HTML
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:-10px;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
position:relative;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<p>We have taken the json and <span class="hover"> csv<span class="tooltip">CSV definition</span></span>files and put them into a <span class="hover"> SQL <span class="tooltip">SQL definition</span></span> database</p>
</div>
</body>
</html>
答
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:-15px;
width:100px;
position:absolute;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<p>We have taken the json and <span class="hover"> csv<span class="tooltip">CSV definition</span></span>files and put them into a <span class="hover"> SQL <span class="tooltip">SQL definition</span></span> database</p>
</div>
</body>
</html>
答
变化position: relative
到position: absolute
:
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:15px;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
position:absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<p>We have taken the json and <span class="hover"> csv<span class="tooltip">CSV definition</span></span>files and put them into a <span class="hover"> SQL <span class="tooltip">SQL definition</span></span> database</p>
</div>
</body>
</html>
+0
当我做这在我的引导代码,悬停/提示完全消失,虽然我可以看到这是工作中的代码片段:(:( –
答
试试这个CSS。
.hover {
position:relative;
top:0px;
left:0px;
line-height: 100%;
display:inline-block;
}
.tooltip {
top:-15px;
background-color:#6b9aff;
color:white;
border-radius:5px;
opacity:0;
position:absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
line-height: 100%;
}
.hover:hover .tooltip {
opacity:1;
}
谢谢你这修好了!!这让我整天难住了!! –
不客气 – Vova