4

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?

Bogz
  • 565
  • 1
  • 10
  • 30

1 Answers1

2

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'
});
Thilak
  • 656
  • 7
  • 15