如何在禁用按钮上启用Bootstrap工具提示?

2020/10/23 18:22 · javascript ·  · 0评论

我需要在禁用的按钮上显示工具提示,然后在启用的按钮上将其删除。目前,它的工作方式相反。

颠倒这种行为的最佳方法是什么?

$('[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>

这是一个演示

PS:我想保留该disabled属性。

这是一些工作代码:http : //jsfiddle.net/mihaifm/W7XNU/200/

$('body').tooltip({
    selector: '[rel="tooltip"]'
});

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

想法是使用selector选项将工具提示添加到父元素,然后rel在启用/禁用按钮时添加/删除属性。

您可以包装被禁用的按钮并将工具提示放在包装器上:

<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:blockdisplay:inline-block似乎工作正常。浮动包装纸似乎也可以正常工作。

更新这是更新的JSFiddle,可与最新的Bootstrap(3.3.6)一起使用。感谢@JohnLehmann为pointer-events: none;禁用按钮提出建议

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

这可以通过CSS完成。“ pointer-events”属性是阻止工具提示出现的原因。您可以通过覆盖引导程序设置的“指针事件”属性来禁用按钮以显示工具提示。

.btn.disabled {
    pointer-events: auto;
}

如果您迫切(像我一样)想要复选框,文本框等工具提示,那么这里是我的hackey解决方法:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

工作示例:http : //jsfiddle.net/WB6bM/11/

出于其价值,我相信禁用表单元素的工具提示对UX非常重要。如果您阻止某人做某事,则应告诉他们原因。

这些变通办法是丑陋的。我调试过的问题是,引导程序会自动设置CSS属性指针事件:在禁用的元素上没有

此魔术属性导致JS无法处理与CSS选择器匹配的元素上的任何事件。

如果将此属性覆盖为默认属性,则所有内容都将像工具提示一样起作用!

.disabled {
  pointer-events: all !important;
}

但是,您不应使用一般的选择器,因为您可能必须手动停止已知的JavaScript事件传播方式(e.preventDefault())。

就我而言,以上解决方案均无效。我发现使用绝对元素将禁用的按钮重叠起来更容易:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

演示版

试试这个例子:

工具提示必须使用初始化jQuery:选择指定的元素并在中调用tooltip()方法JavaScript

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

添加CSS

.tool-tip {
  display: inline-block;
}

.tool-tip [disabled] {
  pointer-events: none;
}

和你的HTML:

<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
    <button disabled="disabled">I am disabled</button>
</span>

您不能使工具提示显示在禁用的按钮上。这是因为禁用的元素不会触发任何事件,包括工具提示。最好的选择是伪造被禁用的按钮(这样它的外观和行为就像被禁用的一样),因此您可以触发工具提示。

例如。Javascript:

$('[rel=tooltip].disabled').tooltip();

$('[rel=tooltip].disabled').bind('click', function(){
     return false;
});

不只是 $('[rel=tooltip]').tooltip();​

HTML:

<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>

JSFiddle:http : //jsfiddle.net/BA4zM/75/

您可以通过CSS简单地为禁用的按钮覆盖Bootstrap的“指针事件”样式,例如

.btn[disabled] {
 pointer-events: all !important;
}

最好还是显式并禁用特定按钮,例如

#buttonId[disabled] {
 pointer-events: all !important;
}

这是我自己和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中,在调用.tooltip('destroy');时,将使用该div的ID。或.tooltip();或

这将启用工具提示,将其放在html文件中包含的任何javascript中。但是,可能不需要添加此行。(如果工具提示未显示此行,则不要理会它)

$("#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文件中覆盖它们。您可以添加任何颜色或禁用按钮时希望按钮显示的形状。确保保持光标:默认;您还可以更改.btn.btn-success的外观。

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

将以下代码添加到任何正在控制按钮启用的JavaScript中。

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

现在,仅在禁用按钮时才显示工具提示。

如果您使用的是angularjs,如果需要的话,我也有解决方案。

如果它可以帮助任何人,我可以通过在其中放置一个跨度并在其中应用工具提示内容(在其周围使用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>

基于Bootstrap 4

禁用的元素具有禁用属性的元素不是交互式的,这意味着用户无法聚焦,悬停或单击它们以触发工具提示(或弹出窗口)。作为一种解决方法,您将希望通过包装器或触发工具提示,最好使用tabindex =“ 0”将其设置为键盘焦点,并覆盖禁用元素上的指针事件。

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

这里的所有详细信息:Bootstrap 4文档

Bootstrap 3.3.6的工作代码

Javascript:

$('body').tooltip({
  selector: '[data-toggle="tooltip"]'
});

$(".btn").click(function(e) {
 if ($(this).hasClass("disabled")){
   e.preventDefault();
 }
});

CSS:

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: auto;
}

您可以使用CSS3模仿效果。

只需将禁用状态从按钮上取下来,工具提示就不会再出现了。这对于验证非常有用,因为代码需要较少的逻辑。

我写了这支笔来说明。

CSS3禁用工具提示

[disabled] {
  &[disabled-tooltip] {
    cursor:not-allowed;
    position: relative;
    &:hover {
      &:before {
        content:'';
        border:5px solid transparent;
        border-top:5px solid black;
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -5px));
      }
      &:after {
        content: attr(disabled-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -15px));
        width:280px;
        background-color:black;
        color:white;
        border-radius:5px;
        padding:8px 12px;
        white-space:normal;
        line-height:1;
      }
    }
  }
}

<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>

只需将禁用类添加到按钮上,而不是添加disabled属性,即可使其明显可见。

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

注意:此按钮似乎仅处于禁用状态,但仍会触发事件,您只需要注意这一点即可。

pointer-events: auto;不适用于<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">

对于Bootstrap 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>

我终于解决了这个问题,至少在Safari中,通过将“ pointer-events:auto”放在“ disabled”之前反向顺序无效。

本文地址:http://javascript.askforanswer.com/ruhezaijinyonganniushangqiyongbootstrapgongjutishi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!