如何关闭jQuery工具提示

Question

我一直在尝试使用jQuery制作非常简单的javascript工具提示，但我已经碰到了一堵砖墙。 我们的想法是在div包含很少的内联元素（ span ）。 span元素将包含一个带有一点html（图像和链接）的工具提示div 。 单击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>

如果点击超出span和工具提示，我似乎找不到关闭工具提示的方法。

Answer 1

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

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

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

Answer 2

要关闭工具提示，您需要致电

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

在你的场景中尝试

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

Answer 3

我为自己的网站调查了这个问题，没有找到合适的解决方案，所以我自己编写了。 我的用例与OP略有不同，但可能会帮助其他人搜索相同的术语。 我需要一个只出现在移动平台上的密切链接。 这很有用，因为在桌面上，当您从目标元素mouseout移出时，工具提示将关闭，但是在触摸平台上它会粘在一起。

// Set up tool tips for images and anchors.
$( document ).tooltip({
  items: "a[title], img[alt], .toolTip[title], :not(.noToolTip)",
    track: true,
    position: { my: "left+15 center", at: "right center" },
   content: function() {
      var element = $( this );
      var closer = closerLink = '';
      if (isMobile()) {
         closer = ' <br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>';
         closerLink = ' <br>Tap link again to open it.<br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>';
      }
      // noToolTip means NO TOOL TIP.
      if ( element.is( ".noToolTip" ) ) {
         return null;
      }
      // Anchor - use title.
      if ( element.is( "a[title]" ) ) {
         return element.attr( "title" ) + closerLink;
      }
      // Image - use alt.
      if ( element.is( "img[alt]" ) ) {
         return element.attr( "alt" ) + closer;
      }
      // Any element with toolTip class - use title.
      if ( element.is( ".toolTip[title]" ) ) {
         return element.attr( "title" ) + closer;
      }
   }
});

function isMobile() {
   return (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent);
}

我在这里针对三种类型的东西：

具有title属性的锚标签（ a ）。
带有title属性的图像标签（ img ）。
具有类toolTip任何元素。
并且特别排除类noToolTip任何元素。

我在这里写了这个： JQuery UI工具提示，带有移动的关闭链接

Answer 4

生成工具提示时，将结果保存到变量中。 您可以在关闭所有工具提示后使用它。

var tooltips = $(document).tooltip({
    // all kind of initilization options like position, open, hide, etc.
});

// ... app logic ...

tooltips.tooltip('close') // will close all tooltips

有这里的信息： https ： //jqueryui.com/tooltip/#forms

Answer 5

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

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

如何关闭jQuery工具提示

问题描述

5 个解决方案

解决方案1
5 已采纳 2012-08-07 07:58:30

解决方案2
4 2012-08-07 07:46:26

解决方案3
1 2015-06-18 13:44:25

解决方案4
0 2018-09-07 12:08:11

解决方案5
-3 2016-06-09 09:31:15

如何关闭jQuery工具提示

问题描述

5 个解决方案

解决方案1 5 已采纳 2012-08-07 07:58:30

解决方案2 4 2012-08-07 07:46:26

解决方案3 1 2015-06-18 13:44:25

解决方案4 0 2018-09-07 12:08:11

解决方案5 -3 2016-06-09 09:31:15

解决方案1
5 已采纳 2012-08-07 07:58:30

解决方案2
4 2012-08-07 07:46:26

解决方案3
1 2015-06-18 13:44:25

解决方案4
0 2018-09-07 12:08:11

解决方案5
-3 2016-06-09 09:31:15