I've implemented a bootstrap tooltip to show an image in it. So far, I've been successful in achieving this.
https://i.sstatic.net/hgzyL.png
However, my current requirement is as follows:
https://i.sstatic.net/xcxWZ.png
I would like to adjust the position of the arrow to match the design. Is there a way to customize the arrow's position?
The function below works on the mouseover event:
function showToolTip(elem) {
var ttContent = '<img class=\'ttImage\' src=\'http:\/\/getbootstrap.com\/apple-touch-icon.png\' \/>';
$(elem).addClass("filter-text-highlight");
if (!$(elem).parent('a.ttTooltip').length) {
$(elem).wrap('<a data-toggle=\"tooltip\" class=\"ttTooltip\" style=\"text-decoration:none\" title=\"' + ttContent + ' \">');
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'right',
html: true,
});
$(elem).tooltip().mouseover();
}
}