Change Bootstrap 4 tooltip template without refresh
<p>I have buttons to bookmark items and the design calls for a tooltip to appear over the bookmark button on hover. Before it's bookmarked, the tooltip should have a yellow background and say "Save". After a user has clicked the button, it should have a green background (and arrow) and read "Saved".</p>

<p><a href="http://v4-alpha.getbootstrap.com/components/tooltips/" rel="nofollow noreferrer">Bootstrap 4 has changed some things</a>, which make CSS targeting more difficult. Namely, the tooltip element doesn't appear in the DOM after the element it's attached to. It appears far at the bottom of the DOM, so <code>.thing--active + .tooltip</code> won't work.</p>

<p>The text change was easy enough. I changed the <code>title</code> attribute on click as well as the <code>data-original-title</code> attribute used by Bootstrap 4. I tried adding a <code>data-template</code> value on click to change the tooltip template used once the item is saved, but it seems that the tooltip style is set on page load. I even tried running <code>.tooltip()</code> on each click to reset the templates each time. No deal.</p>

<p>I thought of using the <code>.on('hidden.bs.tooltip', function () {})</code> event to pass something new in, but to be honest I'm not sure how I'd start going about using that. Any ideas how to make this change on click?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$( function() {
  var savedTemplate = "&lt;div class='tooltip tooltip--active' role='tooltip'&gt;&lt;div class='tooltip-arrow'&gt;&lt;/div&gt;&lt;div class='tooltip-inner'&gt;&lt;/div&gt;&lt;/div&gt;";
  $( '.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 ) );
  } );
} );</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.tooltip--active .tooltip-inner { background-color: green !important; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"&gt;&lt;/script&gt;

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

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