禁用引导开关时添加引导工具提示

Question

类似于this question 使用引导按钮我希望添加一个工具提示，以便在我的引导开关被禁用时显示。

我有this JSFiddle，当地图达到一定的缩放比例时，它会根据下面的代码禁用开关。我现在想添加一个工具提示，告诉用户在禁用 Switch 时放大。

map.on('zoomend', function (e) {
    // Add/remove layers based on zoom level
    if (map.getZoom()>=5) {
        $("[name='my-checkbox2']").bootstrapSwitch('disabled',false);
    }
    else if (map.getZoom()<5) {
        $("[name='my-checkbox2']").bootstrapSwitch('disabled',true);
    }
});

Answer 1

将工具提示分配给复选框本身是没有用的，因为它是隐藏的 - 而是显示/隐藏复选框被包装到的 outer .bootstrap-switch 元素的工具提示：

map.on('zoomend', function(e) {
    // Add/remove layers based on zoom level
    if (map.getZoom() >= 5) {
        $("[name='my-checkbox2']").bootstrapSwitch('disabled', false);

        $("[name='my-checkbox2']")
            .closest('.bootstrap-switch')
            .tooltip('destroy');

    } else if (map.getZoom() < 5) {
        $("[name='my-checkbox2']").bootstrapSwitch('disabled', true)

        $("[name='my-checkbox2']")
            .closest('.bootstrap-switch')
            .attr('title', 'Zoom more in')
            .tooltip();

    }
});

立即触发zoomend 更新工具提示状态：

map.fireEvent('zoomend')

更新小提琴 -> https://jsfiddle.net/ujzaakv3/3