更改引导程序4工具提示模板而不刷新

Question

我有按钮，书签项目和设计要求一个工具提示出现在书签按钮在悬停。在其书签之前，工具提示应该有一个黄色的背景，并说“保存”。用户单击按钮后，应该有一个绿色的背景(和箭头)，并阅读“保存”。

引导4改变了一些事情。，这使得CSS的目标更加困难。也就是说，工具提示元素在附加到的元素之后不会出现在DOM中。它看起来在DOM的底部很远，所以.thing--active + .tooltip不能工作。

修改文本很容易。我在click上更改了title属性以及Bootstrap 4使用的data-original-title属性。我尝试在click上添加一个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>

​