4

Tooltipster プラグイン ( http://calebjacob.com/tooltipster/#demos ) を使用して、ホバー時にツールチップを表示しています。ただし、ツールチップは、ホバリングしている要素の上部/下部にのみ表示されます。

これは、要素にカーソルを合わせたときにツールチップを表示するためのコードであり、うまく機能します

$(".tooltip").tooltipster({
  animation: "fade",
  delay: 200,
  theme: ".tooltipster-default",
  touchDevices: true,
  trigger: "hover",
  interactive: true,
  position: "top"
});

しかし、私が望むのは、ホバーされている要素の中心にツールチップを表示することです。

Tooltipster のドキュメントでは、"position" オプションは "center" 配置をサポートしていません。

ToolTipster の位置に関するドキュメント:

 right, left, top, top-right, top-left, bottom, bottom-right, bottom-left

要素の中心にツールチップを配置する方法を知っている人はいますか?

4

1 に答える 1

2

ツールチップを表示する準備ができたら、css 要素の配置属性を左と上にオーバーライドすることで、中央に配置できます。

ここでハンドラー functionReady: ホバーされた要素の位置でツールチップの位置をオーバーライドするだけです

elem.tooltipster({
    arrow: false,
    functionReady: function(){
          var offset = $(this).offset();
          $(".tooltipster-base").offset(offset);
    },
    theme: 'tooltipster-shadow'
});
于 2014-06-25T06:45:37.750 に答える