CODEWITHSUNDEEP
javascripthtmlcss
Reginald1234
Reginald1234

Reputation: 335

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

Upvotes: 0

Views: 37

Answers (1)

Mohsin Marui
Mohsin Marui

Reputation: 459

I would suggest you please use bootstrap4 tooltip

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>

Upvotes: 2

Related Questions