I am using Tooltipster plugin(http://calebjacob.com/tooltipster/#demos) to display my tooltips on hover. However the tooltip is only displaying at the top/bottom of the element i am hovering.
This is the code i have for displaying tooltip when hover on the element and it works well
$(".tooltip").tooltipster({
animation: "fade",
delay: 200,
theme: ".tooltipster-default",
touchDevices: true,
trigger: "hover",
interactive: true,
position: "top"
});
However what i want is to display the tooltip on the center of the element being hovered.
In the Tooltipster documentation, the "position" option does not support "center" positioning.
ToolTipster Position Documentation:
right, left, top, top-right, top-left, bottom, bottom-right, bottom-left
Does anybody knows how to position the tooltip on the center of the element?
You could achieve center positioning by overriding the css element positioning attributes left and top, when the tooltip is ready to be shown.
Here the handler functionReady: just override's tooltip's position with the hovered element's position
elem.tooltipster({
arrow: false,
functionReady: function(){
var offset = $(this).offset();
$(".tooltipster-base").offset(offset);
},
theme: 'tooltipster-shadow'
});