2

Similar to this question using a Bootstrap Button I am looking to add a tooltip to appear when my Bootstrap Switch is disabled.

I have this JSFiddle that disables the Switch when the map reaches a certain zoom as per the code below. I now want to add a tooltip that tells the user to zoom in when the Switch is disabled.

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);
    }
});
Community
  • 1
  • 1
Joshua Dickerson
  • 157
  • 1
  • 10
  • Are you having a problem with your code? The example you've posted doesn't include anything related to a tooltip. – wahwahwah Jan 21 '16 at 16:37
  • Sorry, should have said, that version of the JSFiddle is blank to add onto rather than my failed attempt. – Joshua Dickerson Jan 21 '16 at 16:38
  • You might want to take a look at the [bootstrap documentation](http://getbootstrap.com/javascript/#tooltips) for tooltip. I'd think you could just manually show or hide the tooltip based on the logic you've already implemented. – wahwahwah Jan 21 '16 at 17:45
  • okay then cheers, i'll look into that in a bit more detail, thought it might have been something that would be included an option of Bootstrap Switch but evidently not that i can tell. – Joshua Dickerson Jan 22 '16 at 14:31
  • @wahwahwah i looked at the bootstrap / bs switch docs and came to [this](https://jsfiddle.net/s537t380/7/) but not sure how to link to if the switch is disabled. – Joshua Dickerson Jan 22 '16 at 23:10

1 Answers1

3

It is to no use to assign a tooltip to the checkbox itself, since it is hidden - instead show / hide a tooltip for the outer .bootstrap-switch element which the checkbox is wrapped into :

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();

    }
});

trigger zoomend immediately to update the tooltip status :

map.fireEvent('zoomend')

updated fiddle -> https://jsfiddle.net/ujzaakv3/3

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Thanks, the only issue with that is that when the switch is not disabled it still shows the tooltip when you hover over it? – Joshua Dickerson Jan 24 '16 at 11:39
  • @JoshuaDickerson, My bad :( Use `tooltip('destroy')` instead of `tooltip('hide')` of course -> **https://jsfiddle.net/ujzaakv3/1/** – davidkonrad Jan 24 '16 at 22:57
  • Thanks, ah i tried 'disabled' and not 'destroy' works really well! – Joshua Dickerson Jan 25 '16 at 08:27
  • Is there a way of achieving this without attaching it to the `zoomend` function as it doesn't look great to the user that it pops up every time the map zooms in/out? Maybe just display when the user hovers over the disabled checkbox? – Joshua Dickerson Jan 25 '16 at 09:49
  • @JoshuaDickerson, I thought you want to have tooltip visible as default, just use `tooltip()` instead of `tooltip('show')` -> **https://jsfiddle.net/ujzaakv3/2/** by that the tooltip is only visible when the mouse hovering the bootstrap swtich. – davidkonrad Jan 25 '16 at 09:59
  • Thanks, that's a simple fix. I guess this still relies on the user zooming in/ out at least once for the tooltip to show on hover as it needs the zoomend to complete first. – Joshua Dickerson Jan 25 '16 at 10:04
  • @JoshuaDickerson, Yes, obviously ...?? That was how your code was made. Just trigger `zoomend` by `map.fireEvent('zoomend')` if you want to avoid that - see updated answer. – davidkonrad Jan 25 '16 at 12:02
  • Din't realise you could use the fireEvent like that, works a treat, really appreciate that addition! – Joshua Dickerson Jan 25 '16 at 12:25