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

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,

ID's must be unique by definition. Show code you are trying to use. Can switch map elements to have class that matches ID of nav. If Nav elements are in exact same order as the map elements, would be simple with `index()` — charlietfl, Nov 13 '13 at 16:42
hey charlietdl I have edited the code I am using , its just the standard init function that is used. — M dunbavan, Nov 13 '13 at 16:49

score 0 · Answer 1 · answered Nov 13 '13 at 16:54

0

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

answered Nov 13 '13 at 16:54

charlietfl

170,828
13
121
150

suggest you create live demo in jsfiddle.net....can use plugin script from docs site for it – charlietfl Nov 13 '13 at 18:06

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

1 Answers1