Изменение шаблона подсказки Bootstrap 4 без обновления

Question

У меня есть кнопки для закладки элементов, а дизайн вызывает всплывающую подсказку для кнопки над кнопкой закладок. Перед тем, как он будет отмечен закладкой, всплывающая подсказка должна иметь желтый фон и сказать «Сохранить». После того, как пользователь нажал кнопку, он должен иметь зеленый фон (и стрелку) и читать «Сохранено».

Bootstrap 4 has changed some things, что затрудняет настройку CSS. А именно, элемент tooltip не появляется в DOM после прикрепленного элемента. Он отображается далеко внизу DOM, поэтому .thing--active + .tooltip не будет работать.

Изменение текста было достаточно простым. Я изменил атрибут title на клик, а также атрибут data-original-title, используемый Bootstrap 4. Я попытался добавить значение data-template при щелчке по изменению шаблона всплывающей подсказки, используемого после сохранения элемента, но кажется, что стиль всплывающей подсказки установлен на загрузке страницы , Я даже попробовал запустить .tooltip() на каждом клике, чтобы каждый раз сбросить шаблоны. Так не пойдет.

Я думал об использовании события .on('hidden.bs.tooltip', function() {}), чтобы передать что-то новое, но, честно говоря, я не уверен, как я начну использовать его. Любые идеи, как сделать это изменение нажатием?

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

Законченное ориентации подсказки с помощью атрибута aria-describedby, который добавляется к кнопке после вызова .tooltip(), то я мог бы выбрать подсказку с помощью JQuery и делать все, что с ним. Слушатель 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>