Question

我正在尝试显示已禁用按钮的工具提示。我不确定jquery事件是否会激活已禁用的元素，但我正在尝试检查是否可以显示已禁用项目的工具提示。我的例子是here

<p>Your age:
    <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>
    <input type="button" title="This a test enabled button." value="hover me please">
</p>
    <p>
  <input type="button" disabled="disabled" title="This a test disabled button." value="hover me please">   </p>



$(function () {
    $(document).tooltip({
        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);
            }
        }
    });
});

Answer 1

看起来不能保证正常工作。

请参阅文档（http://api.jqueryui.com/tooltip/）：

通常，禁用的元素不会触发任何DOM事件。因此，无法正确控制已禁用元素的工具提示，因为我们需要侦听事件以确定何时显示和隐藏工具提示。因此，jQuery UI不保证对附加到禁用元素的工具提示的任何级别的支持。不幸的是，这意味着如果您需要禁用元素上的工具提示，最终可能会混合使用本机工具提示和jQuery UI工具提示。

编辑：解决此问题的一种方法是，不要将按钮设置为disabled，而是将其设置为样式，使其看起来已被禁用。如果它是一个简单的按钮，那么您需要做的就是，如果它是submit按钮，您还必须阻止它提交表单。

编辑＃2 ：我尝试了上述解决方法，看起来opacity:0.5几乎完成了工作（来源：tjvantoll.com）：

.disabled-button {
    opacity: 0.5;
}

这是您更新的小提琴：http://jsfiddle.net/jkLzuh0o/3/

Answer 2

您可以使用onclick =“return false”而不是使用disabled =“disabled”。然后事件仍然被触发并且工具提示将显示，但是当您单击按钮时没有任何反应。这也适用于复选框：）

所以不要这样：

<p>
  <input type="button" disabled="disabled" title="This a test disabled button." value="hover me please">
</p>

你写这个：

<p>
  <input type="button" onclick="return false" title="This a test disabled button." value="hover me please">
</p>

Answer 3

作为一种解决方法，您可以使用未禁用的HTML元素封装按钮，并在其上应用工具提示。

这是我们在角度上使用的一个例子，但你明白了。 HTML：

 CustID  Address   Name    Joindate  num   numid   purchasedate  email  Sale
   1      xxxx     xxx     xx/xx/xx  1261    1       xx/xx/xx   x@x.com  $390
   2      xxxx     xxx     xx/xx/xx  6337    2       xx/xx/xx   x@x.com  $72
   3      xxxx     xxx     xx/xx/xx  1412    3       xx/xx/xx   x@x.com  $15

JS：

<div ng-controller="MyCtrl">
<br/>
<br/>
<br/>
<div class="container">
    <div class="row">
        <div style="display: inline-block;" tooltip="My Tooltip"><input class="input-xxlarge" 
            type="text" ng-disabled="isDisabled" ng-model="myModel"/></div>

        <br/>
        Disable/Enable <input type="checkbox" ng-model="isDisabled"/>

    </div>
</div>

参见工作示例： http://jsfiddle.net/RWZmu/

Answer 4

只需在按钮周围添加父容器，然后在此处设置工具提示属性，即可影响您的容器而不是按钮。

array[DAY,SLOT]           of var 0..1: lesson = array2d(DAY, SLOT, [sum(s in STUDENT)(active[s,time(d,z)]) | d in DAY, z in SLOT]);
array[DAY,SLOT]           of var 0..1: teacher_free_left;
array[DAY,SLOT]           of var 0..1: teacher_free_right;
array[DAY,SLOT]           of var 0..1: teacher_free;
array[DAY,SLOT]           of var 0..1: real_gap;

predicate equals_and(var 0..1: z, var 0..1: x, var 0..1: y) = 
    (z <= x /\ z <= y /\ z >= x + y - 1);

predicate equals_or(var 0..1: z, var 0..1: x, var 0..1: y) = 
    (z >= x /\ z >= y /\ z <= x + y);

% calculate teacher free left
%    first slot -> teacher free = no lesson in the slot
%    other slots -> teacher free = teacher out or (left slot teacher free and no lesson in slot)
array[DAY,SLOT]           of var 0..1: teacher_free_left_temp;

constraint forall(d in DAY)
    (teacher_free_left_temp[d,1]=1-lesson[d,1]);
    
constraint forall(d in DAY, z in 2..maxSlots)
    (equals_and(teacher_free_left_temp[d,z], teacher_free_left[d,z-1], 1-lesson[d,z]));

constraint forall(d in DAY, z in SLOT)
    (equals_or(teacher_free_left[d,z], 1 - bool2int(z in teacher[d]), teacher_free_left_temp[d,z]));
    
% calculate teacher free right
%    last slot -> teacher free = no lesson in the slot
%    other slots -> teacher free = teacher out or (right slot teacher free and no lesson in slot)
array[DAY,SLOT]           of var 0..1: teacher_free_right_temp;

constraint forall(d in DAY)
    (teacher_free_right_temp[d,maxSlots]=1-lesson[d,maxSlots]);
    
constraint forall(d in DAY, z in 1..maxSlots-1)
    (equals_and(teacher_free_right_temp[d,z], teacher_free_right[d,z+1], 1-lesson[d,z]));

constraint forall(d in DAY, z in SLOT)
    (equals_or(teacher_free_right[d,z], 1 - bool2int(z in teacher[d]), teacher_free_right_temp[d,z]));

% teacher free when teacher free left or teacher free right
constraint forall(d in DAY, z in SLOT)
    (equals_or(teacher_free[d,z], teacher_free_left[d,z], teacher_free_right[d,z]));

% real gap when teacher not free and no lesson
constraint forall(d in DAY, z in SLOT)
   (equals_and(real_gap[d,z], 1-teacher_free[d,z], 1-lesson[d,z]));

禁用按钮上的Jquery UI工具提示

4 个答案: