BootstrapVue two tooltips appearing on the same element while having different targets?

Question

I'm working in Vue with BootstrapVue and the bottom 2 tooltips I'm using are both appearing on the button which the click to mask this value button is targeted to. The tooltip which will contain the SSN is also appearing only on top of the button when it should be only where the span is.

I'm not sure why this is happening given that the IDs are seperated and I'd assume that it'd just place the SSN tooltip onto the span so it'd render there.

Markup:

<span class="app-titlebar__client-data-item non-draggable">
  <div v-if="!hideSsn"
    class="ssn-text"
    @mouseenter="checkDataItem($event, 'ssn')"
    @mouseleave="hideTooltips">
    <button class="adv-btn adv-btn--naked  app-titlebar__unmasked-btn"
      id="titlebar-ssn-eye-hide"
      @click="maskSsn(true)"
      @mouseenter="hoverSsnMask(true)"
      @mouseleave="hoverSsnMask(false)">
      <svg class="us-icon-svg us-icon-svg--inline us-icon-svg--xs disable-pointer"
        role="img"
        focusable="false">
        <use xlink:href="#adv-icons-svg_unmasked"></use>
      </svg>
    </button>
    <span id="titlebar-ssn">
      {{ssn}}
    </span>
  </div>

  <div v-else
    class="ssn-text">
    <button class="adv-btn adv-btn--naked  app-titlebar__mask-btn"
      id="titlebar-ssn-eye-show"
      @mouseenter="hoverSsnMask(true)"
      @mouseleave="hoverSsnMask(false)"
      @click="maskSsn(false)">
      <svg class="us-icon-svg us-icon-svg--inline us-icon-svg--xs disable-pointer"
        role="img"
        focusable="false">
        <use xlink:href="#adv-icons-svg_masked"></use>
      </svg>
    </button>
    {{ssnMasked}}
  </div>
</span>

Tooltips:

  <b-tooltip v-if="clientInContext && ssn && hideSsn"
    target="titlebar-ssn-eye-show"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    Click to temporarily display this value
  </b-tooltip>

  <b-tooltip v-if="clientInContext && ssn && !hideSsn"
    target="titlebar-ssn-eye-hide"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    Click to mask this value
  </b-tooltip>

  <b-tooltip v-if="clientInContext && ssn && !hideSsn"
    target="titlebar-ssn"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    {{ssn}}
  </b-tooltip>

Troy Morehouse · Accepted Answer · 2019-06-01 04:02:08Z

3

Since you are using v-if/v-else, make sure you place a unique keyeither on the button wrapper div or the button. What is most likely happening is that Vue is re-using the same element reference and just updating bits of it. b-tooltip caches the element reference when it is mounted.

edited Jun 1, 2019 at 4:02

answered May 13, 2019 at 23:42

Troy Morehouse

5,4451 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Tacker Over a year ago

Not sure if this is the right answer for OP but this fixed a duplicating tooltip issue for me, thanks!

Collectives™ on Stack Overflow

BootstrapVue two tooltips appearing on the same element while having different targets?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related