Tooltip on Button is working but not on input

Question

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!

Christopher Tabula · Accepted Answer · 2022-06-01 10:38:16Z

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.

Collectives™ on Stack Overflow

Tooltip on Button is working but not on input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related