如何enable/disable 根据屏幕大小显示qtip2 工具提示？

Question

假设我想在较小的屏幕宽度上禁用 qtip2 工具提示。我想在不使用媒体查询的情况下完成它。

我正在使用 knockoutjs，这是标记示例：

<input type="text" class="form-control" name="date" placeholder="end date" data-bind="qtip2: {config: {content: {text: 'end date tool tip'}, style: {classes: 'qtip-bootstrap'}, position: {my: 'top-right', at: 'bottom-left'}}}" />

这是自定义活页夹：

ko.bindingHandlers.qtip2 = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var $element = $(element);
        var options = ko.unwrap(valueAccessor()) || {};
        var config = options.config || {};
        $element.qtip(config);
    }
};

Answer 1

这就是我在 jQuery 的帮助下解决它的方法：

ko.bindingHandlers.qtip2 = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var $element = $(element);
        var options = ko.unwrap(valueAccessor()) || {};
        var config = options.config || {};
        var minWidth = 767;
        var $window = $(window);
        var windowWidth = $window.width();
        if (windowWidth > minWidth)
            $element.qtip(config);
        $window.bind('resize', {$element: $element, $window: $window, minWidth: minWidth}, function() {
            if ($window.width() > minWidth)
                $element.qtip('enable', true);
            else
                $element.qtip('disable', true);
        })
    }
};

如果 qtip('enable', true) 和 qtip('disable', true) 是昂贵的操作或者我有很多 qtips 那么事实上没有检查是否真的应该调用这些函数 ( window 可以调整大小，但 qtip 的启用状态仍然不应切换）将是一个性能问题。

如何enable/disable 根据屏幕大小显示qtip2 工具提示？

How to enable/disable displaying of qtip2 tool tips dependent on screen size?

knockout.js

qtip2