Question

我试图在页面加载时显示Jquery UI工具提示，并在工具提示内容中显示关闭/交叉标记图标。单击X图标时应关闭工具提示。我不想使用任何插件。请建议逻辑。

尝试使用以下代码在5秒后隐藏工具提示。

var dur=5000; 
$(document).tooltip({
  show:{
      effect:'slideDown'
  },
  track:true,
  open: function( event, ui ) {
      setTimeout(function(){
      $(ui.tooltip).hide();
   }, dur);
  }
});

尝试下面的代码显示工具提示

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
      $(function () {
          $(document).tooltip({
              position: {
                  using: function (position, feedback) {
                      $(this).css(position);
                      $("<div>")
                        .addClass("arrow")
                        .addClass(feedback.vertical)
                        .addClass(feedback.horizontal)
                        .appendTo(this);
                  }
              }
          });
      });
  </script>
  <style>
  .ui-tooltip, .arrow:after {
    background: black;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;

    font: 8px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 80%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  </style>
</head>
<body>

<p title="Sample Tool Tip Text">Tooltips</p> 

</body>
</html>

Answer 1

如果您想以这种方式使用工具提示，则无法使用$(document).tooltip()。相反，您必须使用$(selector).tooltip().focus()，这将强制打开工具提示。

然后您需要绑定click事件并执行以下操作：$(selector).tooltip("destroy")。

使用你的jsfiddle，我做了以下更改：

HTML：

<p id="p1" title="Sample Tool Tip Text">Tooltips</p>

JAVASCRIPT：

$(function () {
     $("#p1").tooltip({
       items: "p", //use this to override content - in this example, I am using "p" but you can also use classes/id's/etc
       content: function (){
        if ($(this).is("p") ) {
          var text = $(this).attr("title");
          return text + '<span style="position:absolute;top:0;right:0;" class="tooltipClose ui-icon ui-icon-circle-close"></span>';
         }
       },
       position: {
         using: function (position, feedback) {
           $(this).css(position);
           $("<div>")
           .addClass("arrow")
           .addClass(feedback.vertical)
           .addClass(feedback.horizontal)
           .appendTo(this);
         }
       }
     }).focus();

   $(".tooltipClose").click(function(){
      $("#p1").tooltip("destroy");
   });
 });

以下是演示：http://jsfiddle.net/u8kX9/9/

希望这是你正在寻找的！如果您还有其他需要，请告诉我们！

Jquery UI工具提示关闭图标

1 个答案: