Question

我有按钮来标记项目，设计要求工具提示在悬停时显示在书签按钮上。在它被加入书签之前，工具提示应该有一个黄色背景并说“保存”。用户点击按钮后，它应该有一个绿色背景（和箭头）并读取“已保存”。

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

文字改变很容易。我更改了click上的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

使用在调用pygame.mixer.music.load(SongPath + Song[0].strip())后添加到按钮的aria-describedby属性结束定位工具提示，然后我可以使用jQuery选择工具提示并对其执行任何操作。 .tooltip()侦听器设置了初始样式，因为我很懒，无法找到使用CSS的方法。

mouseover

$( 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")
  })
  
  
} );

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

1 个答案: