样式表干扰
[英]Style sheet interfering
问题描述
I'm running into a small problem. 
我遇到一个小问题。 I want to display 3 houses and when you hover over them with your mouse it displays tooltip text. 我想显示3个房屋，当您将鼠标悬停在它们上方时，它会显示工具提示文本。 This is what I got so far. 这就是我到目前为止所得到的。 It runs fine as you can see, but when adding a style sheet it is interfering and deleting the houses and the tooltip text : 如您所见，它运行良好，但是添加样式表时会干扰并删除房屋和工具提示文本：
<!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>
But when I add this in the 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">
The houses with the toolbelt disapears, Is there any reason to fix this problem? 有安全带的房屋消失了，请问有什么理由解决这个问题吗？
Thanks for reading this post, I hope some can help me or give me a suggestion. 感谢您阅读这篇文章，希望有人能对我有所帮助或提出建议。
1 个解决方案
解决方案1
2 已采纳 2018-07-07 18:38:06
I would suggest you please use bootstrap4 tooltip 我建议您使用bootstrap4工具提示
Please try below solution. 请尝试以下解决方案。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.