Hover twice before tooltip works about leaflet.tooltip HOT 10 CLOSED

Hi Tim, what kind of object are you passing in as the target? How are you creating the tooltip? From the snippet you posted it looks like it's being created within the context of an event handler?

from leaflet.tooltip.

Hello @aratcliffe,

Thank you for the fast answer!

I create the tooltip in a mouseover event handler that is called highlight:

function onEachFeature(feature, layer)
{
    layer.on({
            mouseover: highlight,
            mouseout: resetHighlight,
            click: highlightSelection
    });
}

And here is the highlight function:

    var tooltip;
    // Only highlight if thana has data
    if(this.feature.properties.count > 0)
    {
        var thanaName = this.feature.properties.NAME_3
        var target = e.target;
        tooltip = L.tooltip({
            target: target,
            map: map,
            showDelay: 0,
            hideDelay: 0,
            mouseOffset: L.point(0,-24),
            html: "Thana: <strong>" + thanaName + "</strong>"
        });
    }

The object is a polygon representing districts in Belgium that is created using a topojson file.

Thank you!!
Tim

from leaflet.tooltip.

Maybe I don't understand but this doesn't look quite right to me Tim. The Tooltip class registers it's own mouseover and mouseout handlers that show/hide the tooltip. Can you create the tooltip in the onEachFeature callback?

from leaflet.tooltip.

You are right, this resolved my issue. However, the tooltip is now appearing in the top left corner of the browser instead of right next to the mouse. Do you have any idea about what can cause that? Here is my changed code:

// Action for each feature of the choropleth
function onEachFeature(feature, layer)
{
    var thanaName = feature.properties.NAME_3;
    var tooltip = L.tooltip({
        target: layer,
        map: map,
        showDelay: 0,
        hideDelay: 0,
        // mouseOffset: L.point(0,-24),
        html: "Thana: <strong>" + thanaName + "</strong>"
    });

    layer.on({
            mouseover: highlight,
            mouseout: resetHighlight,
            click: highlightSelection
    });
}

Thank you again!

from leaflet.tooltip.

Hi Tim, I haven't used the tooltip myself on polygons but I'm wondering what element the mouseover handler is being attached to by the plugin. In the setTarget method the Tooltip class seeks to attach the event handler to either the _icon or _container property of the passed target object. I would check what _container is in your case.

        if (target._icon) {
            target = target._icon;
        } else if (target._container) {
            target = target._container;
        }

from leaflet.tooltip.

You could also look at trying setting the trackMouse option to true.

from leaflet.tooltip.

@aratcliffe Thank you for the fast answer!

I tried setting trackMouse to true, however the tooltip is now completely hidden.

I am not sure if I understand completely how to use the _container. Trying your code did not return anything, and when using console.log(layer._container) it returns undefined. But there is definitely a _container as you can see below. Any idea on what I should try next?

Thank you again!

from leaflet.tooltip.

I'd put a breakpoint in your code in the onEachFeature callback and inspect the layer and find out what property of the object the reference to its DOM element is stored in. Then I'd pass that to the Tooltip constructor as the target value.

from leaflet.tooltip.

I tried to figure it out, however I did not succeed. I did put up the example online, and maybe you can find out more than me. www.timurgirgin.com/bang/index.html

My question is that if I understand correctly, I am supposed to initialize the tooltip in the onEachFeature function, and somehow open the tooltip within the event listener for hovering. Is there a way to do that with your plugin?

Thank you!

from leaflet.tooltip.

Hi Tim, I created a polygon example and added it here https://github.com/aratcliffe/Leaflet.tooltip/blob/master/examples/polygon.html

When you saw the tooltip appear at the top left of the map viewport were you using the Canvas renderer? That wouldn't work as it only creates a single canvas element. As long as the layer object that you pass to the Tooltip constructor has a _icon or _container property referencing the HTML element for that feature it should work.

from leaflet.tooltip.