更改 Bootstrap 4 不刷新的工具提示模板

Question

我有用于为项目添加书签的按钮，设计要求在悬停时在书签按钮上显示工具提示。在添加书签之前，工具提示应具有黄色背景并显示 "Save"。用户单击按钮后，它应该有绿色背景（和箭头）并显示 "Saved"。

Bootstrap 4 has changed some things，这使得 CSS 定位更加困难。也就是说，工具提示元素不会出现在它附加到的元素之后的 DOM 中。它出现在 DOM 的最底部，因此 .thing--active + .tooltip 不起作用。

文本更改非常简单。我更改了单击时的 title 属性以及 Bootstrap 4 使用的 data-original-title 属性。我尝试在单击时添加 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

最终使用调用 .tooltip() 后添加到按钮的 aria-describedby 属性定位工具提示，然后我可以 select 使用 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>

更改 Bootstrap 4 不刷新的工具提示模板

Change Bootstrap 4 tooltip template without refresh

jquery

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4