0

ツールチップにカーソルを合わせたときに、ツールチップからポイントを含むマップを作成しています。

ツールチップを外側のナビゲーション バーから機能させるのはどれほど簡単で、ナビ項目の上にカーソルを合わせると、マップ上の特定のツールチップが機能するのではないかと考えました。いろいろ試しましたが、これまでのところ何もうまくいきませんでした。左のナビゲーションに関連するすべての要素は同じ ID を持っているので、その ID からホバーをツールチップ自体の ID に一致させようとしました。マークアップは次のとおりです。

左ナビゲーションの HTML:

<div id="property-list">
                    <ul id="current">
                    <h1>Current Developments <img src="wp-content/themes/URB/images/or-dot.png" alt="or-dot" width="14" height="14"></h1>

                    <li>
                    <a id="bermondsey" href="/current-sales/dunton-road/" title="">
                        Bermondsey                  </a>   
                    </li>

                    <li>
                    <a id="clapham" href="/current-sales/wimbledon/" title="">
                        Clapham                 </a>   
                    </li>

                    <li>
                    <a id="east_dulwich" href="/current-sales/wanley/" title="">
                        East Dulwich                    </a>   
                    </li>

                    <li>
                    <a id="elephant_&amp;_castle" href="/current-sales/ec/" title="">
                        Elephant &amp; Castle                   </a>   
                    </li>

                    <li>
                    <a id="wimbledon" href="/current-sales/clapham/" title="">
                        Wimbledon                   </a>   
                    </li>
                                        </ul>
                    <ul id="past">
                    <h1>Past Developments <img src="wp-content/themes/URB/images/cr-dot.png" alt="cr-dot" width="14" height="14"></h1>

                    <li>
                    <a id="clapham_junction" href="/past-sales/clapham/" title="">
                        Clapham Junction                    </a>   
                    </li>

                    <li>
                    <a id="clerkenwell" href="/past-sales/clerkenwell/" title="">
                        Clerkenwell                 </a>   
                    </li>

                    <li>
                    <a id="denmark_hill" href="/past-sales/harbour-road/" title="">
                        Denmark Hill                    </a>   
                    </li>

                    <li>
                    <a id="kennington" href="/past-sales/wimbledon/" title="">
                        Kennington                  </a>   
                    </li>

                    <li>
                    <a id="wimbledon" href="/past-sales/ridgeway/" title="">
                        Wimbledon                   </a>   
                    </li>
                                        </ul>
                    </div>

次に、ドットを表示し、ツールチップを持つマップを作成します。

    <div id="map">
<a title="Bermondsey" class="location-dots-current" href="/current-sales/dunton-road/" style="left: 346px; top: 242px;">
                <img src="/wp-content/themes/URB/images/or-dot.png" alt="or-dot" id="bermondsey" width="14" height="14" class="tooltip">
                </a>
<a title="Clapham" class="location-dots-current" href="/current-sales/wimbledon/" style="left: 289px; top: 276px;"><img src="/wp-content/themes/URB/images/or-dot.png" alt="or-dot" id="clapham" width="14" height="14" class="tooltip">
                </a>
<a title="East Dulwich" class="location-dots-current" href="/current-sales/wanley/" style="left: 349px; top: 282px;">
<img src="/wp-content/themes/URB/images/or-dot.png" alt="or-dot" id="east_dulwich" width="14" height="14" class="tooltip">
                </a>
<a title="Elephant &amp; Castle" class="location-dots-current" href="/current-sales/ec/" style="left: 318px; top: 237px;">
                <img src="/wp-content/themes/URB/images/or-dot.png" alt="or-dot" id="elephant_&amp;_castle" width="14" height="14" class="tooltip">
                </a>
<a title="Wimbledon" class="location-dots-current" href="/current-sales/clapham/" style="left: 240px; top: 345px;">
                <img src="/wp-content/themes/URB/images/or-dot.png" alt="or-dot" id="wimbledon" width="14" height="14" class="tooltip">
                </a>

<a title="Clapham Junction" class="location-dots-past" href="/past-sales/clapham/" style="left: 260px; top: 290px;">
                <img src="/wp-content/themes/URB/images/cr-dot.png" alt="cr-dot" id="clapham_junction" width="14" height="14" class="tooltip">
                </a>
<a title="Clerkenwell" class="location-dots-past" href="/past-sales/clerkenwell/" style="left: 315px; top: 200px;">
                <img src="/wp-content/themes/URB/images/cr-dot.png" alt="cr-dot" id="clerkenwell" width="14" height="14" class="tooltip">
                </a>
<a title="Denmark Hill" class="location-dots-past" href="/past-sales/harbour-road/" style="left: 340px; top: 290px;">
                <img src="/wp-content/themes/URB/images/cr-dot.png" alt="cr-dot" id="denmark_hill" width="14" height="14" class="tooltip">
                </a>
<a title="Kennington" class="location-dots-past" href="/past-sales/wimbledon/" style="left: 311px; top: 262px;">
                <img src="/wp-content/themes/URB/images/cr-dot.png" alt="cr-dot" id="kennington" width="14" height="14" class="tooltip">
                </a>
<a title="Wimbledon" class="location-dots-past" href="/past-sales/ridgeway/" style="left: 235px; top: 335px;">
                <img src="/wp-content/themes/URB/images/cr-dot.png" alt="cr-dot" id="wimbledon" width="14" height="14" class="tooltip">
                </a>
                <img src="/wp-content/themes/URB/images/map.png" alt="map">
</div>

==== 編集 ====

JS:

$(document).ready(function() {
    $('.tooltip').tooltipster({
        theme: '.my-custom-theme',
        touchDevices: true,
        iconTouch: false,
        position: 'left',
        fixedWidth: 278,
        offsetX: -25,
        offsetY: 45
    });
});

これら 2 つをリンクして、tooltipster プラグインと連携して動作させる方法はありますか?

ありがとう、

4

1 に答える 1

0

map 要素の ID を nav 要素に一致するクラスに切り替えると仮定すると、次のように動作するはずです。

$('#property-list a').hover(function(){
  $('.'+this.id).tooltipster('show');
}, function(){
  $('.'+this.id).tooltipster('hide');
})

advancedプラグイン ドキュメントhttp://calebjacob.com/tooltipster/#advancedのセクションでshow/hide メソッドを見つけました

于 2013-11-13T16:54:27.893 に答える