Bootstrap tooltip css not working

问题

I am trying to get the tooltip to work, which does btw, but no CSS is applied to the tooltip for reasons unknown. Since the whole site works fine in bootstrap itself (Wordpress plugin), I am scratching my head on this item.

Code is as following.

<a href="tel:<?php echo $phone;  ?>" data-toggle="tooltip" title="<?php echo $phone; ?>"  data-placement="bottom">
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
        <i class="fa fa-phone fa-stack-1x"></i>
    </span> 
</a>

And the JS.

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

The tooltip appears unstyled on the left side of my screen (while it should be below the item) unstyled. My bootstrap plugin is up to date and runs css version (v3.3.6), so I am wondering if there is an external sheet I need to get for the bootstrap tooltip.

It doesnt say: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

回答1:

You must put bootstrap.min.js after jquery-ui.js! Its all.

<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery-ui.js"></script>
<script type="text/javascript" src="path/bootstrap.min.js"></script>

回答2:

Sometimes you just have to call it and find a different solution. I couldnt understand why it wouldn't appear, (so indeed, it may have not been in that bootstrap version) so instead, i wrote my own tooltip with a bit of simple css. It's not the solution I wanted, but it solved my problem in the end.

Intrested?

.tooltip {
    position: relative;
    display: inline-block;
    font-size: 16px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
     position: absolute;
     z-index: 1;
    width: 120px;
    top: 100%;
     left: 50%; 
     margin-left: -60px; 
    font-size: 12px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

And the modified code

<a href="tel:<?php echo $phone;  ?>" class="tooltip">
    <span class="tooltiptext"><?php echo $phone; ?></span>
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
        <i class="fa fa-phone fa-stack-1x"></i>
    </span> 
</a>

回答3:

Try using data-original-title instead of title

回答4:

Make sure that bootstrap.js or bootstrap.min.js is is included in your project.

Would you please try the following

Please insert this code of javascript

<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    });
</script>

And in Html file add this html part

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

回答5:

Also Include the "bootstrap-tooltip.js" in your HTML/Code

<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>

来源：https://stackoverflow.com/questions/36979255/bootstrap-tooltip-css-not-working

标签

css

twitter-bootstrap

tooltip