ブートストラップ4のツールチップテンプレートを更新せずに変更する

Question

アイテムをブックマークするボタンがあり、ホバー上のブックマークボタンの上にツールチップが表示されるように設計されています。ブックマークする前に、ツールチップに黄色の背景があり、「保存」と言わなければなりません。ユーザーがボタンをクリックすると、緑色の背景（および矢印）が表示され、「保存済み」と表示されます。

Bootstrap 4 has changed some thingsこれはCSSターゲティングをより困難にします。つまり、ツールヒント要素は、それが接続されている要素の後にDOMに表示されません。 DOMの一番下に表示されるので、.thing--active + .tooltipは機能しません。

テキストの変更は簡単でした。私はtitle属性をクリックしても、ブートストラップ4で使用されているdata-original-title属性を変更しました。アイテムに保存されたツールチップテンプレートを変更するには、クリック時にdata-template値を追加しようとしましたが、ツールチップスタイルがページロード。私は毎回テンプレートをリセットするたびに.tooltip()を実行してみました。全く取引しません。

私は.on('hidden.bs.tooltip', function() {})イベントを使って新しいものを渡すことを考えましたが、正直言ってそれをどうやって使うのかは分かりません。どんなアイデアをクリックしてこの変更を行う方法？その後、私はjQueryのを使用してツールチップを選択し、それを何でも行うことができ、あなたが.tooltip()を呼び出した後ボタンに追加されますaria-describedby属性を使用してツールチップをターゲットになってしまった

$(function() { 
 
    var savedTemplate = "<div class='tooltip tooltip--active' role='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>"; 
 
    $('.js-bookmark').tooltip(); 
 
    var bookmarkSwap = function($el) { 
 
    if ($el.hasClass("is-saved")) { 
 
     $el.removeClass("is-saved").attr("aria-label", "Bookmark this").attr("title", "Save") 
 
     // `data-original-title` is set by Bootstrap tooltip.js when 
 
     // title changes. This changes it as well. 
 
     .attr("data-original-title", "Save"); 
 
     $('.js-bookmark').tooltip(); 
 
    } else { 
 
     $el.addClass("is-saved").attr("aria-label", "Bookmarked").attr("title", "Saved").attr("data-template", savedTemplate) 
 
     // `data-original-title` is set by Bootstrap tooltip.js when 
 
     // title changes. This changes it as well. 
 
     .attr("data-original-title", "Saved"); 
 
     $('.js-bookmark').tooltip(); 
 
    } 
 
    }; 
 
    $('.js-bookmark').click(function(e) { 
 
    bookmarkSwap($(this)); 
 
    }); 
 
});

.tooltip--active .tooltip-inner { background-color: green !important; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 

 
<div class="card"> 
 
    <a href="#"> 
 
     <img class="card-img-top" src="http://lorempixel.com/100/100/nature/" width="100"> 
 
    </a> 
 
    <div class=""> 
 
     <h3 class="card-title"> 
 
      <a href="#">Vendor Name</a> 
 
     </h3> 
 

 
     <p class="card-text"> 
 
      Boise, ID 
 
     </p> 
 
     <button class="js-bookmark save-vendor" aria-label="Bookmark" data-toggle="tooltip" data-placement="top" title="Save">☑️</button> 
 
    </div> 
 
</div>

Answer 1

。 mouseoverリスナーは初期のスタイルを設定します。なぜなら私は怠け者で、CSSでやる方法が分からないからです。

$(function() { 
 
    var bookmarkSwap = function($el) { 
 
    if ($el.hasClass("is-saved")) { 
 
     $el.removeClass("is-saved") 
 
     .attr("aria-label", "Bookmark this") 
 
     .attr("title", "Save") 
 
     .attr("data-original-title", "Save"); 
 
     
 
     var id = $el.attr("aria-describedby"); 
 
     changeTooltip(id,false); 
 
     
 
    } else { 
 
     $el.addClass("is-saved") 
 
     .attr("aria-label", "Bookmarked") 
 
     .attr("title", "Saved") 
 
     .attr("data-original-title", "Saved"); 
 
     
 
     var id = $el.attr("aria-describedby"); 
 
     changeTooltip(id,true); 
 
     
 
    } 
 
    }; 
 
    
 
    var changeTooltip = function(id,saved){ 
 
    var bg = saved ? "green" : "red"; 
 
    var text = saved ? "Saved" : "Save"; 
 
    $("#"+id).find(".tooltip-inner").css("background-color",bg).text(text); 
 
    } 
 
    
 
    var bookmarks = $(".js-bookmark"); 
 
    bookmarks.tooltip(); 
 
    bookmarks.click(function(e) { 
 
    bookmarkSwap($(this)); 
 
    }); 
 
    
 
    bookmarks.mouseover(function (e) { 
 
    var id = $(this).attr("aria-describedby"); 
 
    var saved = $(this).hasClass("is-saved"); 
 
    changeTooltip(id,saved); 
 
    $(this).unbind("mouseover") 
 
    }) 
 
    
 
    
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 

 
<div class="card"> 
 
    <a href="#"> 
 
     <img class="card-img-top" src="http://lorempixel.com/100/100/nature/" width="100"> 
 
    </a> 
 
    <div class=""> 
 
     <h3 class="card-title"> 
 
      <a href="#">Vendor Name</a> 
 
     </h3> 
 

 
     <p class="card-text"> 
 
      Boise, ID 
 
     </p> 
 
     <button class="js-bookmark save-vendor" aria-label="Bookmark" data-toggle="tooltip" data-placement="top" title="Save">☑️</button> 
 
    </div> 
 
</div>