I am trying to toggle popover element if it is clicked outside of the div element containing the popover and if clicked on any other div containing popover. I went through other post that did not help or I could not figure out how do I implement in my scenario.
My html
<div id="myTableDiv"> <table id="myTable"> <tr> <td>Product</td> <td>Qty</td> </tr> <tr> <td> <div class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is factory damage"> <span style="margin-right:5px">shirt</span> <i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i> </div> </td> <td>5</td> </tr> <tr> <td> <div class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is size mis match"> <span style="margin-right:5px">shoes</span> <i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i> </div> </td> <td>15</td> </tr> </table> </div>
$('#myTableDiv').on('click', '.popUpClass', function(e) { $(this).popover({ content: $(this).data('reason'), container: 'body' }) })
Hello as the documentarion says here you should add a tabindex attribute so your <div>
will be:
<div tabindex="0" class="popUpClass" rel="popover" data-content="" data-reason="returnded reason is factory damage">
<span style="margin-right:5px">shirt</span>
<i class="glyphicon glyphicon-exclamation-sign" style="font-size:12px; color:red"></i>
</div>
And in the configuration of your popover you have to add the trigger:
trigger: 'focus'
I hide all the popovers and then show only the clicked element
Finally your code could be:
$('#myTableDiv').on('click', '.popUpClass', function(e) {
$(this).popover({
trigger: 'focus',
content: $(this).data('reason'),
container: 'body'
})
$('.popUpClass').popover('hide');
$(this).popover('toggle');
})
Here you can find the complete example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.