CODEWITHSUNDEEP
javascriptvue.jsvuejs3bootstrap-5
B0BBY
B0BBY

Reputation: 1109

Tooltip on Button is working but not on input

I want to use Tooltips inside of my project where I'm using Vue 3 and Bootstrap 5.

I have done following in my script:

<script>
  import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";

  export default {
    mounted() {
      Array.from(document.querySelectorAll('button[data-bs-toggle="tooltip"]'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
    }
  }
</script>

now I want to use it inside of my template. On the following button it works out well, but I could not use it on my input.

<template>
  <button type="button" class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
  </button>

  <input
    type="text"
    class="form-control"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    :title="txt_input"
    :value="txt_input"
    readonly
  />
</template>

I could not figure out why it is not working. Thanks for your help!

Upvotes: 2

Views: 869

Answers (1)

Christopher Tabula
Christopher Tabula

Reputation: 633

Assuming you have a value for txt_input, you simply need to repeat the code for your button element:

    mounted() {
      Array.from(document.querySelectorAll('button[data-bs-toggle="tooltip"]'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
      Array.from(document.querySelectorAll('input[data-bs-toggle="tooltip"]'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
    }

However, we can write a cleaner implementation by using class name instead:

<template>
  <button 
    class="btn btn-secondary me-2 tooltip-element"
    data-bs-placement="top"
    title="Tooltip on top"
    type="button">
    Tooltip on top
  </button>

  <input
    :title="txt_input"
    :value="txt_input"
    class="form-control tooltip-element"
    data-bs-placement="bottom"
    readonly
    type="text"
  />
</template>

<script>
  import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";

  export default {
    mounted() {
      Array.from(document.querySelectorAll('.tooltip-element'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
    }
  }
</script>

Edit

We can remove data-bs-toggle="tooltip" from the elements if we're using class name in the querySelectorAll.

Upvotes: 2

Related Questions