如何关闭jQuery工具提示

Question

如何关闭jQuery工具提示

Kri*_*ian 7 javascript jquery jquery-tooltip

我一直在尝试使用jQuery制作非常简单的javascript工具提示,但我已经碰到了一堵砖墙.想法是span在一个内部有一个内联元素()div.该span元素将包含一个div带有一点html(图像和链接)的工具提示.单击span元素时应打开工具提示,单击其外部或工具提示外部时应关闭工具提示.

到目前为止,打开工具提示不是问题,而是关闭.

<!DOCTYPE HTML>
<html>
<head>
    <title></title>

    <style>
        #colors > div {
            background-color: red;
            height: 50px;
            width: 50px;
            margin: 5px;
        }

        #colors > div > span {
            min-height: 10px !important;
            min-width: 10px !important;
            border: 3px solid black;
            position: relative;
        }

        .tooltip {
            border: 2px solid blue;
            display: none;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function () {
            // generate boxes and tooltips
            for (var i = 0; i < 9; i++) {
                $('#colors').append('<div id="' + i + '"><span><div class="tooltip"><a href="#">add to favorites</a></div></span></div>');
            }

            $('#colors').delegate('span', 'click', function (event) {
                $(this).children('.tooltip').css({position:'absolute', top:'5px', left:'5px'}).fadeIn();
                // bottom one won't work
                //event.stopPropagation();
            });

            $(document).delegate('body', 'click', function (event) {
                var that = this
                $.each($('.tooltip'), function (index, element) {
                    // it's always visible ...
                    //if ($(element).is(':visible')) {

                    // doesn't work either
                    if ($(element).is(':visible') && $(element).has(event.target).length === 0) {
                        var s = event.target;

                        console.log([($(s) == event.target), event.target, index, element, $(element).has(event.target).length, that]);
                    }
                });
            });
        })
    </script>
</head>
<body>
<div id="colors"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果点击在工具提示之外,我似乎无法找到关闭工具span提示的方法.

Answer 1

Dec*_*lty 5

要关闭工具提示，您需要调用

$('.tooltip').remove();

Run Code Online (Sandbox Code Playgroud)

在你的场景中尝试

$.each($('.tooltip'), function (index, element) {
    $(this).remove();
 });

Run Code Online (Sandbox Code Playgroud)

Answer 2

pku*_*rek 5

像这样的东西应该工作正常:)

 $(document).mouseup(function (e)
 {
     var container = $("YOUR CONTAINER SELECTOR");

     if (container.has(e.target).length === 0)
     {
        container.hide();
     }
 });

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，4 月前
查看次数：	12479 次
最近记录：	7 年，2 月前