web-dev-qa-db-ja.com

無効なボタンでbootstrapツールチップを有効にする方法

無効なボタンにツールチップを表示し、有効なボタンにツールチップを削除する必要があります。実際には逆の方法で機能します。

この動作を反転させる最良の方法は何ですか？

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

デモは次のとおりです。 http://jsfiddle.net/BA4zM/68/

追伸：属性を無効のままにしておきたい。

javascriptjquerytwitter-bootstraptooltiptwitter-bootstrap-tooltip
147
Lorraine Bernard

ここにいくつかの作業コードがあります： 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属性を追加/削除するという考え方です。

16
mihai

無効なボタンをラップして、ツールチップをラッパーに配置できます。

<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を使用するとうまくいくようです。また、フローティングラッパーでも問題なく動作するようです。

更新これは、最新のBootstrap（3.3.6）で動作する更新されたJSFiddleです。無効なボタンにpointer-events: none;を提案してくれた@JohnLehmannに感謝します。

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

227
balexand

これはCSSを介して実行できます。 「ポインターイベント」プロパティは、ツールチップが表示されないようにするものです。ブートストラップによって設定された「pointer-events」プロパティをオーバーライドすることで、ツールチップを表示する無効なボタンを取得できます。

.btn.disabled {
    pointer-events: auto;
}
104
Gene Parcellano

チェックボックス、テキストボックスなどのツールチップが欲しかった場合（私がそうであったように）、ここに私のハッキーの回避策があります：

$('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にとって非常に重要だと思います。誰かが何かをするのを防いでいるのなら、その理由を伝える必要があります。

24
nolanpro

これらの回避策はいです。私は問題をデバッグしましたbootstrapは、CSSプロパティを自動的に設定しますpointer-events：none無効な要素。

この魔法の特性により、JSはCSSセレクターに一致する要素のイベントを処理できません。

このプロパティをデフォルトのプロパティに上書きすると、ツールチップを含むすべてがチャームのように機能します！

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

ただし、一般的なJavaScriptイベントの伝播方法（e.preventDefault（））を手動で停止する必要があるため、それほど一般的なセレクターは使用しないでください。

6
lukyer

無効なボタンにツールチップを表示することはできません。これは、無効化された要素がツールヒントを含むイベントをトリガーしないためです。あなたの最善の策は、無効になっているボタンを偽造することです（したがって、無効になっているように見え、動作します）。その後、ツールヒントをトリガーできます。

例えば。 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/

5
Adam

私の場合、上記のソリューションはどれも機能しませんでした。次のように絶対要素を使用すると、無効なボタンを簡単にオーバーラップできることがわかりました。

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

デモ

5
vorillaz

この例を試してください：

ツールチップはjQueryで初期化する必要があります。指定された要素を選択し、JavaScriptのtooltip()メソッドを呼び出します。

$(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>
4
Denis Bubnov

CSSを使用して、無効なボタンのBootstrapの「ポインターイベント」スタイルを単純にオーバーライドできます。

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

明示的にして、特定のボタンを無効にしてください。

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

これが私と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では、.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を使用している場合、そのためのソリューションもあります。

3
user3885123

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;
}
1
Nerian

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

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">
0
John Smith

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>
0
Helgi Kropp