Блог

Я работаю в Vue с BootstrapVue, и обе нижние подсказки, которые я использую, появляются на кнопке, на которую нацелена click to mask this value кнопка. Всплывающая подсказка, которая будет содержать SSN, также отображается только поверх кнопки, когда она должна быть только там, где находится диапазон.

Я не уверен, почему это происходит, учитывая, что идентификаторы разделены, и я бы предположил, что он просто поместил всплывающую подсказку SSN в span, чтобы она отображалась там.

Разметка:

 <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>
  

Всплывающие подсказки:

   <b-tooltip v-if="clientInContext amp;amp; ssn amp;amp; 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 amp;amp; ssn amp;amp; !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 amp;amp; ssn amp;amp; !hideSsn"
    target="titlebar-ssn"
    :disabled.sync="disableSsnTooltip"
    :show.sync="showSsnTooltip"
    triggers="hover"
    placement="bottom">
    {{ssn}}
  </b-tooltip>
  

Поскольку вы используете v-if / v-else , убедитесь, что вы разместили уникальную key либо на оболочке кнопки, div либо на button . Скорее всего, происходит то, что Vue повторно использует ту же ссылку на элемент и просто обновляет ее фрагменты. b-tooltip кэширует ссылку на элемент при его монтировании.