我需要在禁用按钮上显示工具提示,并在启用按钮上删除它。目前,它是反向工作的。

扭转这种行为的最好方法是什么?

$('[rel=tooltip]').tooltip(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button> <button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

这是一个演示

附注:我想保留disabled属性。


当前回答

引导3

HTML

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

CSS

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

JS

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap') .popover({ trigger: 'hover', container: 'body', placement: 'bottom', content: function() { return $(this).parent().prop('disabled') ? $(this).data('hint') : $(this).parent().data('hint'); } }); button { position:relative; /* important! */ } .sp-btn-overlap { position:absolute; top:0; left:0; height:100%; width:100%; background:none; border:none; z-index:1900; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <button disabled class="btn btn-default" data-hint="Enabled"> <div class="sp-btn-overlap" data-hint="Disabled"></div> Disabled button </button> <button class="btn btn-default" data-hint="Enabled"> <div class="sp-btn-overlap" data-hint="Disabled"></div> Enabled button </button>

其他回答

引导3

HTML

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

CSS

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

JS

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap') .popover({ trigger: 'hover', container: 'body', placement: 'bottom', content: function() { return $(this).parent().prop('disabled') ? $(this).data('hint') : $(this).parent().data('hint'); } }); button { position:relative; /* important! */ } .sp-btn-overlap { position:absolute; top:0; left:0; height:100%; width:100%; background:none; border:none; z-index:1900; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <button disabled class="btn btn-default" data-hint="Enabled"> <div class="sp-btn-overlap" data-hint="Disabled"></div> Disabled button </button> <button class="btn btn-default" data-hint="Enabled"> <div class="sp-btn-overlap" data-hint="Disabled"></div> Enabled button </button>

你可以包装禁用按钮,并将工具提示放在包装器上:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

如果包装器有display:inline,那么工具提示似乎不起作用。使用display:block和display:inline-block似乎工作得很好。它似乎也可以很好地使用浮动包装器。

这是一个更新的JSFiddle,它与最新的Bootstrap(3.3.6)一起工作。感谢@JohnLehmann建议指针事件:没有;为禁用按钮。

http://jsfiddle.net/cSSUA/209/

这是我和tekromancr想出的。

示例元素:

<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>

注意:工具提示属性可以添加到一个单独的div,其中div的id将在调用.tooltip('destroy')时使用;或.tooltip ();

这使工具提示,把它放在任何javascript,包括在HTML文件。但是,可能没有必要添加这一行。(如果工具提示显示w/o这一行,那么就不要费心包括它)

$("#element_id").tooltip();

破坏工具提示,参见下面的用法。

$("#element_id").tooltip('destroy');

阻止按钮被点击。因为disabled属性没有被使用,这是必要的,否则按钮仍然是可点击的,即使它“看起来”好像被禁用了。

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

使用引导,您可以使用类btn和btn-disabled。 在你自己的.css文件中重写这些。你可以添加任何颜色或任何你想要按钮在禁用时的样子。确保你保持光标:default;您还可以更改.btn。btn-成功看起来是这样的。

.btn.btn-disabled{
    cursor: default;
}

将下面的代码添加到控制按钮启用的javascript中。

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

工具提示现在只在按钮被禁用时显示。

如果你正在使用angularjs,如果需要的话,我也有一个解决方案。

如果这对任何人都有帮助的话,我可以让一个禁用按钮显示一个工具提示,只需在其中放置一个span,并在那里应用工具提示的东西,angularjs围绕它…

<button ng-click="$ctrl.onClickDoThis()"
        ng-disabled="!$ctrl.selectedStuff.length">
  <span tooltip-enable="!$ctrl.selectedStuff.length"
        tooltip-append-to-body="true"
        uib-tooltip="Select at least one thing to enable button.">
    My Butt
  </span>
</button>

pointer-events:汽车;在<input type="text" />上无效。

我采取了不同的方法。我没有禁用输入字段,但使其作为通过css和javascript禁用。

因为输入字段没有被禁用,所以工具提示显示正常。在我的情况下,如果输入字段被禁用,这比添加包装器要简单得多。

$(document).ready(function () { $('.disabled[data-toggle="tooltip"]').tooltip(); $('.disabled').mousedown(function(event){ event.stopImmediatePropagation(); return false; }); }); input[type=text].disabled{ cursor: default; margin-top: 40px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">