1

Qtipをインストールし、マップ上のツールチップに使用しました。

http://www.gregquinn.com/oneworld/about_people6.html

赤いピンをロールオーバーして、現在そこにあるツールチップを確認できます。

しかし、彼らは、「イタリア」（左側のテキスト）という単語をロールオーバーすると、同じツールチップがイタリアのある赤いピンの横の地図にポップアップ表示されるようにしたいと考えています。

マップ上の赤いピンの場合、ALTタグ付きの画像マップを使用して次のようなツールチップをトリガーしています。

<script class="example" type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
// We'll target all AREA elements with alt tags (Don't target the map element!!!)
$('area[alt]').qtip(
{
    content: {
        attr: 'alt' // Use the ALT attribute of the area map for the content
    },
    style: {
        classes: 'ui-tooltip-tipsy ui-tooltip-shadow ui-tooltip-light'
    }
});
});
</script>

Qtipのドキュメントには、位置（）をターゲットにできると書かれていますがposition: { target: $('ul:first li:last') }、その方法がわかりません。または、マップ座標をターゲットにして、これらすべてを1ページに表示できますか？

4

1 に答える 1

0

hover左側のテキストで、show対象とする特定の qtip のメソッドをトリガーするイベントを使用できるはずです。

HTML では、リンクにクラスを追加し、データ属性も追加する必要があります。

<span class="qt-pointer" data-country="italy">Italy</span>
<span class="qt-pointer" data-country="kenya">Kenya</span>

JavaScript は次のようになります。

$('.qt-pointer').hover(function () {
  // on hover
  $('#' + $(this).data('country')).qtip("show");
}, function () {
  // on exit
  $('#' + $(this).data('country')).qtip("hide");
});

qtip エリアには、qt-pointers の data-country 属性に対応する ID が必要です。私は qtip を使用していないので、上記のコードを疑似コードとして扱います。問題の解決に役立つことを願っています。

于 2012-05-26T00:28:38.097 に答える