Tooltips not showing up with latest version of Bootstrap

Bootstrap Studio Help
1

Hi, by default my new projects use Bootstrap 4.5, which is fine. I’ve been trying to get tooltips to work when hovering over a button and the only way I can get it to work is to include version 3.4.1 of bootstrap.min.css. But then that causes some changes to other elements on my site, so I’d rather not go backwards. I’m sure that I’m just doing something silly… I’ve created a codepen here: https://codepen.io/mbestuk/pen/XWjropv where the tooltip goes away if the external css file link is changed to 4.3.1… I’m confused and going around in circles :frowning:

2

Are you using the latest version of Bootstrap Studio? In the 4.x version, Bootstrap Tooltips were not enabled by default. You had to manually add the javascript. But as of BSS 5.x, Tooltips are a part of the options panel, and should work with the current version of Bootstrap that the program uses (Bootstrap v4.5.2)

In your codepen, when I set the Bootstrap version to 4.5.2 the tooltip works fine.

<html>
<head>

 <!-- if the version is changed to 4.3.1, then the tooltip doesn't work anymore?-->
 <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>


<body>  

  <button type="button" class="btn btn-secondary glossary-item" data-toggle="tooltip" data- 
  placement="bottom" title="If you have to ask, you can't afford it.">How much is it?</button>

 </body>

 </html>
1 Like
3

If you are looking to style all the tooltips the same then sub

.glossary-item + .tooltip > .tooltip-inner

to

body + .tooltip > .tooltip-inner

If you are looking to style each tooltip on a page differently…I have no idea. Stumper. :bat:

5

One way would be to target each tooltip or tooltips in their own container so you can set individual styles.

$(document).ready(function(){
    $("#myTooltip-1").tooltip({
        container: '#toolone',
    }); 
});
$(document).ready(function(){
    $("#myTooltip-2").tooltip({
        title: "<h4 >Hello, <b>I'm</b> <i>Smiley!</i></h4>",  
        html: true,
        container: '#tooltwo',
    }); 
});

Different Tools

Then style em…

1 Like
6

Thanks for the catch! Geeze… too many windows open at once, and not enough sleep! Posted it where it belongs.

7

Thanks. I actually changed to popovers as they worked ok, but yes, I can now see that using 4.5.2 works fine with the tooltips.

8

After more research I found you can actually use the data-attribute data-container which will target the wrapper you set.

Custom Tooltips

<span class="tooltip-danger"><button class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" type="button" title="If you have to ask, you cant afford it." data-container=".tooltip-danger">How much is it?</button></span>

.tooltip-danger .tooltip-inner {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
  border-top-color: #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
  border-left-color: #721c24;
}