Question

我已经开始工作了（参见下面的jsFidde），但是当工具提示弹出时，不知道如何让背景模糊不清。这可能吗？或者我必须使用对话框吗？ http://jsfiddle.net/EqT4R/

$(function() {
    $( document ).tooltip();
    // ???
});

Answer 1

我试试this approach。没有原生的“模糊”效果。

Answer 2

除了模糊之外，我尝试了一些不同的方法。

当工具提示时，

opens：我将添加背景颜色
closes：我将删除背景颜色

JQuery的：

$(document).tooltip({
    show: {
        effect: "slideDown",
        delay: 100
    },
    open: function( event, ui ) {
        $("body").addClass("customColor");
    },
    close: function( event, ui ) {
        $("body").removeClass("customColor");
    }
});

参考 LIVE DEMO

Answer 3

我能够通过CSS过滤器实现这种效果：

.blur {
    -webkit-filter: blur(1px);
    transition: all 0.5s ease;
}
.noblur {
    -webkit-filter: blur(0px);
    transition: all 1s ease;
}

还有toolip的open（）和close（）事件：

$(document).tooltip({
    open: function( event, ui ) {
        $("#poem").addClass("blur");
        $("#poem").removeClass("noblur");
    },
    close: function(event, ui) {
        $("#poem").removeClass("blur");
        $("#poem").addClass("noblur");
    }
});

事实证明，无论应用什么CSS（例如.blur）都没有应用于工具提示，谢天谢地。见jsFiddle completed：http://jsfiddle.net/88gNA/

Answer 4

我认为通过将mouseenter和mouseleave处理程序添加到获取工具提示的链接，我已经接近了您正在寻找的效果。当我将鼠标悬停在链接上时，我会在填充页面并具有CSS透明度的文档中添加一个元素。我将链接设置为display: inline-block和z-index: 999，以便它保持在新元素的顶部。当我将鼠标移离链接时，我.detach()新元素。

使用带有模糊半透明纹理的png背景而不是新元素的颜色，您可以更接近所需效果。

CSS：

.bgblur {
    position: absolute;
    z-index: 800;
    top: -1em;
    right: -1em;
    bottom: -1em;
    left: -1em;
    background-color: white;
    opacity: 0.8;
}

的JavaScript：

$bgblur = $("<div class='bgblur'>");
$(function () {
    $(document).tooltip();
    $("a[title]").on("mouseenter", function () {
        $(this).css({
            "display": "inline-block",
                "position": "relative",
                "z-index": "999"
        });
        $(this).before($bgblur);
    });
    $("a[title]").on("mouseleave", function () {
        $bgblur.detach();
    });
});

demo

当我打开jQuery工具提示时，如何模糊背景？

4 个答案:

JQuery的：

CSS：

的JavaScript：