Лист таблицы вмешивается

У меня проблема. Я хочу отобразить 3 дома, и когда вы наведите курсор мыши на них, вы увидите текст всплывающей подсказки. Это то, что я получил до сих пор. Он работает отлично, как вы можете видеть, но при добавлении таблицы стилей он мешает и удаляет дома и текст всплывающей подсказки:

<!DOCTYPE html>
<html>
<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 110%;
    left: 50%;
    margin-left: -60px;
    
        /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
    

}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {

        visibility: visible;
    opacity: 1;
}

.linkhome {
    display: inline-block;
            font-size: 2.25rem;
   padding-left: 10px;
      padding-right: 10px;
    
}

.linkhome :hover {
    color:#23739b;
    transition: color 0.3s ease-in-out;
}

.links {

}
</style>
<body>

<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="links">

<div class="tooltip"><div class="linkhome">
                <a href="https://bitcoin.org/" target="_blank" title="Official website">      
                     <i class="fas fa-home"></i>
                </a> 
            </div>
  <span class="tooltiptext">Homepage</span>
</div>
<div class="tooltip"><div class="linkhome">
                <a href="https://bitcoin.org/" target="_blank" title="Official website">      
                     <i class="fas fa-home"></i>
                </a> 
            </div>
  <span class="tooltiptext">Tooltip text</span>
</div>
<div class="tooltip"><div class="linkhome">
                <a href="https://bitcoin.org/" target="_blank" title="Official website">      
                     <i class="fas fa-home"></i>
                </a> 
            </div>
  <span class="tooltiptext">Tooltip text</span>
</div>
</div>



</body>
</html>

Но когда я добавляю это в head-tag:

<link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
        integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
        crossorigin="anonymous">

Дома с инструментальной панелью исчезают, есть ли причина для решения этой проблемы?

Спасибо, что прочитали этот пост, я надеюсь, что некоторые могут помочь мне или дать мне предложение.

javascript,html,css,

0

Ответов: 1

1 принят

Я бы посоветовал вам использовать всплывающую подсказку bootstrap4

Попробуйте ниже решение.

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

</head>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   
});
</script>
<body>
<h2>Bottom Tooltip w/ Top Arrow</h2>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">      
   <i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">      
   <i class="fas fa-home"></i>
</a>
<a href="https://bitcoin.org/" target="_blank" data-placement="bottom" data-toggle="tooltip" title="Official website">      
   <i class="fas fa-home"></i>
</a>
</body>
</html>
JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика