Bootstrap Tooltip Not Showing Up

user_2871401 0
Viewed 43788

I am trying to use the Bootstrap tooltip in an app of mine. Currently, I have the following:

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

Unfortunately, my tooltip is not showing. I'm trying to figure out what I'm doing wrong. I know that it can be created via JavaScript. However, I'm trying to define my tooltip declaratively. I've confirmed that the Tooltip.js file is being included. However, I can't figure out what I'm doing wrong.

Is it possible to use a tooltip in a pure declarative sense? If so, can someone show me how via a JSFiddle or Bootply sample? I'm really banging my head on this one.

twitter-bootstrap tooltip jquery
4 Answers

For Bootstrap 5:

Reference Link: https://getbootstrap.com/docs/5.0/components/tooltips/

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div>
<button type="button" class="btn btn-secondary m-4" data-bs-toggle="tooltip" title="Tooltip">
  Tooltip
</button>
</div>

user_81135060
Related