logo标签列表

jQueryUI提示小部件：单击显示工具提示

jquery-uiwidgetonclicktooltip
11
如何修改新的jQueryUI工具提示小部件，以便在文档中某些元素的单击事件上打开工具提示，而其他元素仍在鼠标悬停事件时显示其工具提示。 在单击打开的情况下，应通过在文档的其他地方单击来关闭工具提示。
这是否可能？
7个回答
33

使用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/进行检查。

感谢Piradian帮助改进代码。

8
这个方案的问题在于，一旦你通过点击打开提示框，它之后就会采用悬停行为。 - Dologan
1
这个对我不起作用。我有Bootstrap 3.03，但在压缩版本中出现错误'uncaught TypeError: e[c] is not a function'，你有什么建议吗？错误发生在open处。 - yardpenalty.com
顺便提一下，我认为这段代码已经解决了悬停行为的问题。 - Mladen Adamovic
12

这段代码创建了一个提示框，直到你在提示框外面点击才会关闭。即使在你关闭提示框后它依然有效。这是对 Mladen Adamovic 的回答 的详细阐述。

演示代码：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");
    }
});
7

这篇答案基于使用不同类别的元素。当在具有“trigger”类的元素上发生单击事件时，该类将更改为“trigger on”，并触发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/

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>

Sample: http://jsfiddle.net/A44EB/123/

5
我今天一直在研究这个问题，我想分享我的结果...
使用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在fiddle上...
无论如何，这里是一个fiddle，可以更好地查看交互：http://jsfiddle.net/AK7pv/
4

更新Mladen 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");   
  }
});
-2

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');
   });
谢谢，但我更喜欢使用工具提示小部件，因为这会使我的代码保持简单。然而，如果无法使用jQueryUI自己的小部件完成，您的建议仍然是备选方案。那么，有人可以帮忙吗？ - besq
我已经改进并更新了答案，以供未来读者参考。虽然之前的答案可以工作，但那是使用另一个自定义库。 - Garry
1
更新的版本对我来说似乎是最干净的答案。 - AnthonyVO
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接