Question

与使用Bootstrap Button的this question类似，我希望添加一个工具提示，以便在我的Bootstrap Switch被禁用时显示。

我有this JSFiddle，当地图达到某个缩放时，按照下面的代码禁用Switch。我现在想要添加一个工具提示，告诉用户在禁用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

将工具提示分配给复选框本身是没有用的，因为它是隐藏的 - 而是显示/隐藏复选框被包装到的外部 .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')

更新小提琴 - ＆gt;的 https://jsfiddle.net/ujzaakv3/3

禁用Bootstrap Switch时添加Bootstrap Tooltip

1 个答案: