5

Absolute noob here. My aim is to get the bootstrap-tooltip to appear on clicking a bootstrap-glyphicon. But it appears on hover instead. Sharing the jsfiddle here - https://jsfiddle.net/govind91/Lzzgxcro/

This is the html

<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Some tooltip text!" data-toggle="tooltip" data-trigger="click" > </span>

Javascript 

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

Kindly let me know where I'm going wrong.

Govind
  • 53
  • 1
  • 1
  • 3

2 Answers2

6

I believe you need to include the Bootstrap JavaScript file in addition to the CSS files, and then it should work!

https://jsfiddle.net/a4WwQ/1082/

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    trigger: 'click'
});
Myles O'Connor
  • 190
  • 1
  • 3
  • 10
    The documentation clearly says that `data-trigger="click"` should work. – alexw Jan 16 '17 at 06:32
  • 1
    @myles: do you put the jquery code in the – coder101 Apr 12 '20 at 21:45
0

I wanted to use html in title attribute value so the code would be like this :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>


<img alt="i" data-bs-customClass="custom-tooltip-does-not-work" data-bs-html="true"
     data-bs-toggle="tooltip" src="./info-circle-fill.svg"
     title=" Test Click Title ">

     <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>
     
<script>
    $(document).ready(function () {
        [].slice.call(document.querySelectorAll('img[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                'customClass': 'custom-tooltip',
                animated: 'fade',
                placement: 'bottom',
                trigger: 'click'
            })
        })
    });
</script>

</body>

</html>

also thanks to : Using Bootstrap 5 to create custom tooltips

arash yousefi
  • 376
  • 5
  • 16