CSS bootstrap hover Tooltip не работает

Я пытаюсь использовать CSS только для создания всплывающей подсказки/всплывающей подсказки над словом в параграфе. Это работает до степени, но проблема в том, что она оставляет большие пробелы в параграфе - пожалуйста помогите мне, я теряю волю здесь ...CSS bootstrap hover Tooltip не работает

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>

источник

2016-11-08 Rose Kane Quinn

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

источник

2016-11-08 15:13:25 Vova

благодарственных вы это исправили! Это заставило меня вздрогнуть весь день! –

Добро пожаловать – Vova

Изменение 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>

источник

2016-11-08 15:01:21 Arkej

Когда я делаю это в моей бутстраповской коде, парение/подсказка полностью исчезает, хотя я могу видеть, что это работает в фрагменте коды :(:( –

Попробуйте 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; 
}

источник

2016-11-08 15:11:25 Dcoto

CSS bootstrap hover Tooltip не работает

ответ

Смежные вопросы