I have many image icon on my page which have Tooltip on it and show different text in tooltip. I want to show each tooltips when user click on its image icon not on hover. and also when user click on any other place or area of page tooltip also hide or disappear.

<img style="width:26px; height: 23px;"  data-toggle="tooltip" data-html="true" title="" src="/images/alert.png" data-original-title="Number Typ and Service Type:">

CodePudding user response：

You can do it using bootstrap

 <b-button id="tooltip-target-1">
    Click Me
  </b-button>
  <b-tooltip target="tooltip-target-1" triggers="click">
    I am tooltip <b>component</b> content!
  </b-tooltip>

CodePudding user response：

No need to reinvent the wheel. You can use third party library like TippyJs:

tippy(".item", {
  trigger: 'click',
  content: `item info`,
  allowHTML: true,
  animation: 'fade',
  onShow(instance) {
    let element = instance.reference;
    instance.setContent(element.getAttribute('data-info'));
    //console.log(instance);
  },
});

img {
  margin: 2rem
}

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<img class='item' src="https://picsum.photos/id/4/150/100" data-info="item info 1">
<img class='item' src="https://picsum.photos/id/2/150/100" data-info="item info 2">

CodePudding user response：

My JQuery solution without any other js libs for custom tooltip:

    <script>
  $(document).ready(function() {
        var noHideTooltip = false;
        $(document).click(function(e) {
            if (!noHideTooltip) {
                $('.tooltip-box-show').removeClass('tooltip-box-show');
            }
        });
        $(document).on('click', '.tooltip-box', function(e) {
            $('.tooltip-box-show').removeClass('tooltip-box-show');
            $(this).addClass('tooltip-box-show');
            noHideTooltip = true;
            setTimeout(function() { noHideTooltip = false; }, 0);
        });
    });
  </script>

.tooltip-text {display:none; background:#ccc;}
.tooltip-box-show ~ .tooltip-text {display:block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/OOjs_UI_icon_alert_destructive.svg/120px-OOjs_UI_icon_alert_destructive.svg.png" ><span >Text here..</span

Just add your css tooltip style