How to align tooltips next to plots on rafael/mapael map

Question

I am trying to align tooltips on a rafael/mapael map. Currently they default to the lower left side of the map but hoping they would show near the plot that is being hovered.

I created a jsbin here.

http://jsbin.com/pogaqecuwa/edit?html,js,output

I also want to add an href links to the plots. Is that possible if so can I include the link with each plot or do I need to catch an event handler?

    function initMap() {
        var $map = $('#map'),
                state;
        $map.mapael({
            map: {
                name: "usa_states",
            },


            plots: {
                'ny': {
                    latitude: 40.717079,
                    longitude: -74.00116,
                    tooltip: {content: "New York",
                              offset: {
                left:3000,
                top:1000
              }
                    }
                },
                'on': {
                    latitude: 33.145235,
                    longitude: -83.811834,
                    size: 18,
                    tooltip: {content: "Oconee National Forest"}
                },
                'sf': {
                    latitude: 37.792032,
                    longitude: -122.394613,
                    size: 12,
                    tooltip: {content: "San Francisco"}
                },
                'la': {
                    latitude: 26.935080,
                    longitude: -80.851766,
                    size: 26,
                    tooltip: {content: "Lake Okeechobee"}
                },
                'gc': {
                    latitude: 36.331308,
                    longitude: -83.336050,
                    size: 10,
                    tooltip: {content: "Grainger County"}
                },
                'cc': {
                    latitude: 36.269356,
                    longitude: -76.587477,
                    size: 22,
                    tooltip: {content: "Chowan County"}
                },
                'll': {
                    latitude: 30.700644,
                    longitude: -95.145249,
                    tooltip: {content: "Lake Livingston"}
                },
                'tc': {
                    latitude: 34.546708,
                    longitude: -90.211471,
                    size: 14,
                    tooltip: {content: "Tunica County"}
                },
                'lc': {
                    latitude: 32.628599,
                    longitude: -103.675115,
                    tooltip: {content: "Lea County"}
                },
                'uc': {
                    latitude: 40.456692,
                    longitude: -83.522688,
                    size: 11,
                    tooltip: {content: "Union County"}
                },
                'lm': {
                    latitude: 33.844630,
                    longitude: -118.157483,
                    tooltip: {content: "Lakewood Mutual"}
                }
            }
        });
}

//ie svg height fix
        function _fixMapHeight() {
            $map.find('svg').css('height', function () {
                return $(this).attr('height') + 'px';
            });
        }


    $(function () {
        initMap();
    });

score 1 · Answer 1 · answered Oct 31 '17 at 10:47

Actually, Mapael provides an example which show you how to perform what you want.

If you hover Rennes with your mouse, you'll see a tooltip.

If you click on Rennes, you'll be taken to the Wikipedia page.

When using tooltips, you need to actually add some CSS.

Usually, this one is used:

.mapael .mapTooltip {
    position: absolute;
    background-color: #474c4b;
    moz-opacity: 0.70;
    opacity: 0.70;
    filter: alpha(opacity=70);
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    max-width: 200px;
    display: none;
    color: #fff;
}

However, only the position and display attributes are mandatory to have a functional tooltip.

Regarding href links, Mapael has indeed support for it! Area, plot or link can have an href option (and if needed, a target option).

As per the documentation:

defaultArea / defaultPlot / defaultLink : (Object) Default options for all areas, plotted points or curved links of the map. 
    ...
    href : (String) Href for the elements.
    target : (String) Target of the href for the elements (it can be set to a regular HTML target such as _blank, _self, ...).

As a side note, I couldn't help but notice that in your JSBin example, you are using Mapael v0.7.1. I strongly suggest you to update to latest 2.1.0.

How to align tooltips next to plots on rafael/mapael map

1 Answers1