Tuesday, April 15, 2014

Disabled Tooltip

My last project runs on Bootstrap-Knockout platform.  I'm learning a lot about presenting elements in this environment. One of the major problem is to hide tooltip for Mobile views.
I searched the Internet and did not find a lot of information about such problem. One of the articles was particularly good, but I still have to find my original solution. My code disables the tooltip for Mobile users and save button functionality.
Here's what I did.

HTML:
<button class="btn btn-default btn-primary" type="button" data-bind="text: RequiresConfig == true ? 'Create' : 'Add to Cart',tooltip: { title: RequiresConfig == true ? 'Create' : 'Add to Cart', placement: 'bottom', disable: false }"></button>

Javascript/jQuery (accompanies HTML).
<script type='text/javascript'>
        jQuery(function ($) {
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                ko.bindingHandlers.tooltip = {
                    options: {
                        disable: true
                    }
                };
                ko.applyBindings({});
            }
        });
    </script>

No comments:

Post a Comment