在自定义 leafletjs 控件上设置工具提示

Question

我在 Leafletjs 中制作了几个自定义按钮 - 现在我想添加一个悬停工具提示来解释按钮的作用。我已经尝试在选项中放置 "title:" 和 "tooltip:"，但当我将鼠标悬停在控件上时仍然看不到文本。

var load = L.Control.extend({
    options: {
        position: 'topright'

    },

    onAdd: function(map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-load-points');

        //container.style.backgroundColor = 'white';
        container.style.width = '25px';
        container.style.height = '25px';

        container.onclick = function() {
            clear_markers(markers);
            load_markers(markers);
        }
        return container;
    },
});

Answer 1

为了回答我自己的问题，我使用了错误的方法来添加标题选项。通过先创建容器，然后在我能够填充标题字段并在鼠标悬停时显示工具提示后设置标题。

var load = L.Control.extend({
    options: {position: 'topright'},
    onAdd: function(map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-load');
        container.title = "Enter Tooltip Here"
    }
});

在自定义 leafletjs 控件上设置工具提示

Set tooltip on custom leafletjs control

javascript

tooltip

leaflet