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
    });
});

有没有办法可以将这两件事联系起来，以便它们与 tooltipster 插件协同工作？

谢谢，

4

1 回答 1

0

假设您将地图元素中的 ID 切换到与导航元素匹配的类，以下应该可以工作

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

advanced在插件文档http://calebjacob.com/tooltipster/#advanced部分找到了显示/隐藏方法

于 2013-11-13T16:54:27.893 回答