Question

我试图仅使用CSS在段落中的单词上创建悬停弹出/工具提示 - 它在某种程度上起作用但问题是它在段落中留下了很大的空白 - 请帮助我，我失去了意志这里...

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>

Answer 1

将position: relative更改为position: absolute：

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

试试这个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;
}

Answer 3

.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>

CSS bootstrap hover Tooltip不起作用

3 个答案: