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"); 
    } 
});