jQueryUI工具提示窗口小部件顯示工具提示點擊

Question

如何修改新的jQueryUI的工具提示窗口小部件，以打開文檔上某些元素的點擊事件工具提示，而其他人仍然在鼠標懸停事件上顯示他們的tootip。在點擊打開的情況下，應通過單擊文檔上的其他位置來關閉工具提示。

這可能嗎？

Answer 1

的jsfiddle http://jsfiddle.net/bh4ctmuj/225/

這可能會有幫助。

<!-- HTML --> 
     <a href="#" title="Link Detail in Tooltip">Click me to see Tooltip</a>  
<!-- Jquery code--> 

    $('a').tooltip({   
    disabled: true, 
    close: function(event, ui) { $(this).tooltip('disable'); } 
    }); 

    $('a').on('click', function() { 
    $(this).tooltip('enable').tooltip('open'); 
    }); 

Answer 2

上一個答案不使用jqueryui，它的相當複雜。

這工作：

HTML：

<div id="tt" >Test</div> 

JS：

$('#tt').on({ 
    "click": function() { 
    $(this).tooltip({ items: "#tt", content: "Displaying on click"}); 
    $(this).tooltip("open"); 
    }, 
    "mouseout": function() {  
    $(this).tooltip("disable"); 
    } 
}); 

可以使用 http://jsfiddle.net/adamovic/A44EB/

Answer 3

我一直在這個問題今天打檢查它，我想通了我會分享我的結果...

使用jQueryUI工具提示中的示例，自定義樣式和自定義內容

我想要這兩者的混合。我希望能夠擁有彈出窗口而不是工具提示，並且內容需要是自定義HTML。所以沒有懸停狀態，而是一個點擊狀態。

我的JS是這樣的：

 $(function() { 
     $(document).tooltip({ 
      items: "input", 
      content: function() { 
       return $('.myPopover').html(); 
      }, 
      position: { 
       my: "center bottom-20", 
       at: "center top", 
       using: function(position, feedback) { 
        $(this).css(position); 
        $("<div>") 
          .addClass("arrow") 
          .addClass(feedback.vertical) 
          .addClass(feedback.horizontal) 
          .appendTo(this); 
       } 
      } 
     }); 

     $('.fireTip').click(function() { 
      if(!$(this).hasClass('open')) { 
       $('#age').trigger('mouseover'); 
       $(this).addClass('open'); 
      } else { 
       $('#age').trigger('mouseout'); 
       $(this).removeClass('open'); 
      } 

     }) 

    }); 

第一部分是或多或少從UI網站的代碼示例直接拷貝與另外的提示框項目和內容。

我的HTML：

<p> 
     <input class='hidden' id="age" /> 
     <a href=# class="fireTip">Click me ya bastard</a> 
    </p> 

    <div class="myPopover hidden"> 
     <h3>Hi Sten this is the div</h3> 
    </div> 

睡牀簡單，我們欺騙懸停狀態，當我們點擊錨標記（fireTip類），持有該提示輸入標籤具有鼠標懸停狀態調用，從而發射工具提示和保管它只要我們願意...的CSS是用小提琴...

不管怎麼說，這裏是一個小提琴看到的相互作用會好一點： http://jsfiddle.net/AK7pv/

Answer 4

這個答案是基於與合作迪菲租賃類。當點擊事件發生在具有「觸發器」類的元素上時，該類將更改爲「觸發開啓」，並觸發mouseenter事件以將其傳遞給jquery ui。

此示例中的Mouseout被取消，使所有事情都基於點擊事件。

HTML

<p> 
<input id="input_box1" /> 
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1"> 
?</button> 
</p> 
<p> 
<input id="input_box2" /> 
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2"> 
?</button> 
</p> 

jQuery的

$(document).ready(function(){ 
$(function() { 
//show 
$(document).on('click', '.trigger', function() { 
    $(this).addClass("on"); 
    $(this).tooltip({ 
     items: '.trigger.on', 
     position: { 
      my: "left+15 center", 
      at: "right center", 
      collision: "flip" 
     } 
    }); 
    $(this).trigger('mouseenter'); 
}); 
//hide 
$(document).on('click', '.trigger.on', function() { 
    $(this).tooltip('close'); 
    $(this).removeClass("on") 
}); 
//prevent mouseout and other related events from firing their handlers 
$(".trigger").on('mouseout', function (e) { 
    e.stopImmediatePropagation(); 
}); 
}) 
}) 

http://jsfiddle.net/AK7pv/111/

Answer 5

這個版本保證了提示停留用戶可見足夠長的時間在移動工具提示鼠標和保持可見，直到鼠標移出。方便讓用戶從工具提示中選擇一些文本。

$(document).on("click", ".tooltip", function() { 
    $(this).tooltip(
     { 
      items: ".tooltip", 
      content: function(){ 
       return $(this).data('description'); 
      }, 
      close: function(event, ui) { 
       var me = this; 
       ui.tooltip.hover(
        function() { 
         $(this).stop(true).fadeTo(400, 1); 
        }, 
        function() { 
         $(this).fadeOut("400", function(){ 
          $(this).remove(); 
         }); 
        } 
       ); 
       ui.tooltip.on("remove", function(){ 
        $(me).tooltip("destroy"); 
       }); 
      }, 
     } 
    ); 
    $(this).tooltip("open"); 
}); 

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a> 

樣品：http://jsfiddle.net/A44EB/123/

Answer 6

此代碼創建直到您單擊工具提示之外的保持開放的工具提示。即使在您解僱工具提示後，它也能正常工作。這是一個詳細的Mladen Adamovic's answer。

小提琴：http://jsfiddle.net/c6wa4un8/57/

代碼：

var id = "#tt"; 
var $elem = $(id); 

$elem.on("mouseenter", function (e) { 
    e.stopImmediatePropagation(); 
}); 

$elem.tooltip({ items: id, content: "Displaying on click"}); 

$elem.on("click", function (e) { 
    $elem.tooltip("open"); 
}); 


$elem.on("mouseleave", function (e) { 
    e.stopImmediatePropagation(); 
}); 


$(document).mouseup(function (e) { 
    var container = $(".ui-tooltip"); 
    if (! container.is(e.target) && 
     container.has(e.target).length === 0) 
    { 
     $elem.tooltip("close"); 
    } 
}); 

Answer 7

更新姆拉登Adamovic答案有一個缺點。它只工作一次。然後工具提示被禁用。每次代碼應該補充與點擊啓用工具提示時，使其工作。

$('#tt').on({ 
    "click": function() { 
    $(this).tooltip({ items: "#tt", content: "Displaying on click"}); 
    $(this).tooltip("enable"); // this line added 
    $(this).tooltip("open"); 
    }, 
    "mouseout": function() {  
    $(this).tooltip("disable"); 
    } 
});