6

私は現在、私のサイト全体にQtip2ツールチップを実装しており、それらは非常にうまく機能しています。

ただし、要素ごとにツールチップの位置を設定する必要があります。このために、次のdataようないくつかの属性を設定しました。

<img src="/images/help-icon.png" 
    class="tooltip" 
    title="Lorem ipsum dolor sit amet consectetur adipiscing elit" 
    data-tooltip-my-position="right center" 
    data-tooltip-target-position="left center" />

関数を使用してデータ属性を取得しようとしましたが、デフォルトの位置であるように見える右下/左上にツールチップを配置するだけなので、 myandプロパティは関数を受け入れないようです。at

$(this).find('.tooltip').qtip({
    show: {
        event: 'mouseenter click'
    },
    position: {
        my: function() {
            return $(this).data('tooltip-my-position'); // doesn't work
        },
        at: function() {
            return $(this).data('tooltip-target-position'); // doesn't work
        }
    }
});

ドキュメントを確認しましたが、初期化時または初期化後にポジショニングプロパティをプログラムで設定するためのガイダンスがないようです。

私がやろうとしていることが可能かどうか、もしそうなら、どのようにできるか誰かが知っていますか？

4

1 に答える 1

12

私は解決策を思いついたばかりで、通常はここに投稿した直後に十分です。

ターゲット要素をパラメーターとして渡されるイベントに関数を接続し、そこから属性をshow取得できます。data

$(this).find('.tooltip').qtip({
    show: {
        event: 'mouseenter click'
    },
    events: {
        show: function(event, api) {
            var $el = $(api.elements.target[0]);
            $el.qtip('option', 'position.my', $el.data('tooltip-my-position') || 'right center');
            $el.qtip('option', 'position.at', $el.data('tooltip-at-position') || 'left center');
        }
    }
});

将来誰かに役立つ場合に備えて、この回答はここに残しておきます。

于 2012-12-20T16:32:37.760 に答える