如何从功能本身之外的元素上使工具提示起作用？

Question

I am creating a map with points on it from a tooltip when hovered the tooltip works.

I wondered how easy it would be to make the tooltips work from an outside nav bar so when you hoiver over the nav item its specific tooltip on the map works. I tried various things but nothing has worked so far. All the elements related to the left nav have the same id so I tried matching a hover from that id to the id of the tooltip itself. Here is the markup:

HTML for left nav:

<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>

Then I have a map that displays the dots and has tooltips:

    <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>

==== Edit ====

JS:

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

Is there a way I can link these 2 things so they work in tandem with the tooltipster plugin?

Thanks,

Answer 1

Assuming you switch the ID's in map elements to class that matches nav elements, the following should work

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

Found the show/hide methods in advanced section of plugin docs http://calebjacob.com/tooltipster/#advanced