Jquery UI工具提示關閉圖標

我試圖在工具提示內容中使用關閉/十字標記圖標加載頁面時顯示Jquery UI工具提示。工具提示應該在點擊X圖標時關閉。我不想使用任何插件。請建議邏輯。Jquery UI工具提示關閉圖標

嘗試了下面的代碼，在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>

來源

2013-01-11 Kurkula

我用上面的代碼在5秒後隱藏了工具提示。下面的代碼是顯示工具提示。 – Kurkula

如果你想使用工具提示以這種方式，你不能使用$(document).tooltip()。相反，您將不得不使用$(selector).tooltip().focus()，這會強制打開工具提示。

然後，您需要綁定單擊事件並執行以下操作：$(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/

希望這是你在找什麼！需要幫助請叫我！

來源

2013-01-11 20:58:54 Dom

我正在嘗試使用上面的示例並根據我的要求進行修改。但我缺少一些邏輯，我必須在5秒後隱藏工具提示。我在以下位置添加了代碼 http://jsfiddle.net/u8kX9/12/ 不確定問題出在哪裏 var duration = 5000; （），{ $（ui.tooltip）.hide（）; }，duration）; } – Kurkula

檢查您的控制檯，是否有錯誤。在「打開」和「位置」之前添加逗號。 http://jsfiddle.net/u8kX9/13/ – Dom

非常感謝您的額外時間。 – Kurkula

Jquery UI工具提示關閉圖標

回答

相關問題