The tooltips work on hover, but whenever the page is resized or zoomed in, some of them break and others don't. Has anyone else ran into this issue, and if so, how did you fix it?
Example HTML markup as below
<label for="xyz" class="control-label">
Label Text
<a href="javascript:;" class="help" data-toggle="popover" data-trigger="hover" data-container="body" data-placement="right" data-html="true" data-content="tooltip text">
<i style="font-size: 20px;" class="fa fa-question-circle"></i>
</a>
</label>
onResize call the method below to destroy and readd the popovers/tooltips
`function getWinSize() {
var placement1, placement2, wsize;
wsize = $(window).width();
wsize < 767 ? (placement1 = 'top', placement2 = 'left') : (placement1 = 'right', placement2 = 'right');
$('html').hasClass('no-boxsizing') && (placement1 = 'top', placement2 = 'left');
if ($('[data-toggle="tooltip"]').length) {
$('[data-toggle="tooltip"]').tooltip('destroy');
$('[data-toggle="tooltip"]').tooltip({ 'placement': placement2, 'trigger': 'hover focus' });
$('[data-toggle="tooltip"]').tooltip({ 'placement': placement1, 'trigger': 'focus', delay: { show: 800, hide: 0 } });
}
if ($('[data-toggle="popover"]').length) {
$('[data-toggle="popover"]').popover('destroy');
if (wsize <= 751) {
$('[data-toggle="popover"]').popover({
'placement': 'bottom',
'trigger': 'hover click'
});
} else {
$('[data-toggle="popover"]').popover({
'placement': 'right',
'trigger': 'hover click'
});
}
}
}`