Quiero usar Tooltips dentro de mi proyecto donde estoy usando Vue 3 y Bootstrap 5 .
He hecho lo siguiente en mi 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> ahora quiero usarlo dentro de mi plantilla. En el siguiente button funciona bien, pero no pude usarlo en mi 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>No pude entender por qué no está funcionando. ¡Gracias por tu ayuda!
Suponiendo que tiene un valor para txt_input , simplemente necesita repetir el código para su elemento de botón:
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)); }Sin embargo, podemos escribir una implementación más limpia usando el nombre de la clase en su lugar:
<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>Editar
Podemos eliminar data-bs-toggle="tooltip" de los elementos si usamos el nombre de clase en querySelectorAll .