1

I need it to work when I click on a because I have a fixed sized div with only a single line of text in it like this:

<div style="width:200px; height:200px; background-color:yellow" 
class="mytooltip" 
title="Dismissible popover" 
data-toggle="popover" 
data-trigger="focus" 
data-placement="auto right" 
data-content="Click anywhere in the document to close this popover">
  <a href="#">click me</a>
</div>

this is what I've tried:

// 1st method
$(document).ready(function(){
  $('.mytooltip').click(function(e) {
    alert('clicked'); // this alert is fired
    $(this).popover(); // this doesn't
  });
});

and I also found the method below but instead of triggering the popover on click, the popover shows on hover.. so I'm guessing this method doesn't care about the properties on the element and requires the popover parameters to be declared in the script but I haven't found any references about this..

// 2nd method
$('body').tooltip({
   selector: '.mytooltip',
   trigger: 'focus',
});

here's the jsfiddle of my latest attempt

EDIT:

  1. I mistakenly wrote 'tooltip' when I meant 'popover' in this question.
  2. it turns out that the 2nd method does take the data-properties into consideration.. (I didn't test it enough).
  3. but it still only triggers the popover when I click on the link. it won't show the popover when I click on the div area.
  4. added a jsfiddle link to further clarify my question
dapidmini
  • 1,490
  • 2
  • 23
  • 46
  • Have you added required JS and CSS for this tooltip of Bootstrap? – Divya Apr 12 '18 at 06:04
  • @Divya yes. I'm currently trying it out on the w3schools's Try it out page from the bootstrap tooltip section.. so it should have included all the required JS and CSS files for this – dapidmini Apr 12 '18 at 06:08
  • 1
    in jsfiddle code also you have written tooltip, and tooltip is working fine. you will have to add code for triggering popover. also jsfiddle provides you script section where you can write script instead adding it in html section. :) – Divya Apr 12 '18 at 06:33
  • 1
    @Divya yes.. I just realised that I've been saying tooltip all this time while I meant for popover. and I've found the solution after seeing https://stackoverflow.com/questions/16990573/how-to-bind-bootstrap-popover-on-dynamic-elements thanks – dapidmini Apr 12 '18 at 06:41

0 Answers0