如何使工具提示从函数本身之外的元素工作


How to make tooltip work from elements outside the function itself?

当悬停工具提示时,我正在从工具提示创建带有点的地图。

我想知道从外部导航栏使工具提示工作有多容易,因此当您在导航项上徘徊时,地图上的特定工具提示可以正常工作。我尝试了各种方法,但到目前为止没有任何效果。与左侧导航相关的所有元素都具有相同的 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
    });
});

有没有办法链接这两件事,以便它们与工具提示插件协同工作?

谢谢

假设您将映射元素中的 ID 切换到与导航元素匹配的类,则以下内容应该有效

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

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