Question

我遇到一个小问题。我想显示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>

但是当我将其添加到头部标签中时：

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

有安全带的房子消失了，有什么理由解决这个问题吗？

感谢阅读这篇文章，希望有人能对我有所帮助或提出建议。

Answer 1

我建议您使用bootstrap4工具提示

请尝试以下解决方案。

样式表干扰

1 个答案: