在自定义 Leafletjs 控件上设置工具提示 [英] Set tooltip on custom leafletjs control

问题描述

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

I have made several custom buttons in Leafletjs - now I would like to add a hover-over tooltip to explain what the button does. I've tried putting a "title:" and "tooltip:" in the options but still do not see the text when I hover over the control.

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;
    },
});

推荐答案

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

To answer my own question I was using the wrong approach to add the title option. By creating the container first and then setting the title after I was able to populate the title field and have a tooltip work on hover over.

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 控件上设置工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！