The tooltip feature is functioning properly on the button, but unfortunately it is not working

I am incorporating Tooltips into my project, utilizing Vue 3 and Bootstrap 5.

In the script section, I have included the following:

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

Although it works fine on buttons in my template, it does not seem to work on input fields. Here is an example of how I tried to implement it:

<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 am unable to identify why it is not functioning as expected. Any assistance would be greatly appreciated! Thank you.

javascriptvue.jsvuejs3bootstrap-5

Answer №1

If you already have a value assigned to txt_input, you can streamline the code for your button element like this:

    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));
    }

Alternatively, a more organized approach can be achieved by utilizing class names:

<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

If using class name in the querySelectorAll, there is no need for 

data-bs-toggle="tooltip"
in the elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the location of Vuex store in a Nuxt application?

I'm currently exploring Vuex and Nuxt, as well as diving into the world of Node.js. One question I have is about the relationship between Nuxt and Vuex. In a standard Vue setup, Vuex acts as a client-side store. But in Nuxt, which is a server-side ren ...

vue.jsvuex

Utilizing shared functions defined across different controllers

Can I utilize the code within these controllers for other purposes? .controller('GenericController', ['$scope', '$controller', '$rootScope', '$dialogs', '$state', '$http', '$modal& ...

javascriptangularjsinheritance

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

As a beginner in web development, I have some knowledge of javascript, html, css and am currently delving into php. However, I am struggling to find comprehensive resources that show how to integrate all these languages together. I would greatly appreciat ...

phpjavascripthtmlcss

CSS causing black bars to appear when image is moved

I recently started working with HTML/CSS and JS, but I've encountered a small issue. I'm using the bootstrap carousel and it's functioning well, but when I try to move the image higher up, black bars appear at the bottom as if my images are ...

htmlcssbootstrap-5carousel

What is the best way to divide React Router into separate files?

My routes configuration is becoming cluttered, so I have decided to split them into separate files for better organization. The issue I am facing is that when using 2 separate files, the routes from the file included first are rendered, but the ones from ...

javascriptreactjsreact-routerreact-router-v4

Executing JavaScript Code Through Links Created Dynamically

I am currently developing a website with a blog-style layout that retrieves information from a database to generate each post dynamically. After all posts are created, the header of each post will trigger an overlaid div displaying the full article for tha ...

javascriptphpjqueryhtmlcss

How can I utilize the mapping function on a promise received from fetch and display it on the page using React

As I'm using fetch to return a promise, everything is working fine. However, I am facing an issue while trying to map over the fetched data. When I check my console log, it shows "undefined." const dataPromise = fetch('http://api.tvmaze.com/sche ...

javascriptreactjs

Having trouble with jQuery toggle fade: Unable to make the div fade in/out when toggling

Is there a way to modify the functionality of my black button so that when clicked, the red div fades out while the blue div fades in? Right now, clicking the button switches between the two divs without any fading effect. Fiddle: http://jsfiddle.net/ddac ...

javascriptjquerycss

The React JSX error you encountered is due to the missing return value at the end of the arrow function

After implementing my code, I noticed the following: books.map(({ subjects, formats, title, authors, bookshelves }, index) => { subjects = subjects.join().toLowerCase(); author = authors.map(({ name }) => name).join() ...

javascriptreactjs

Is there a way to use JavaScript or jQuery to automatically convert HTML/CSS files into PDF documents?

While using OS X, I noticed that in Chrome I have the option to Save as PDF in the print window by setting the destination to "Save as PDF". Is this feature available on Windows? Is there a way to easily save to PDF with just one click? How can I access t ...

javascriptjqueryhtmlcsspdf

How to pass property data between sibling components in Vue 2

I am facing a situation with two components - Header.vue and Sidebar.vue In Header.vue, there is a button that when clicked should change the value of a property in Sidebar.vue The template code in Header.vue looks like this: <a v-on:click="toggl ...

javascriptvue.jsvuejs2

Objects That Are Interconnected in Typescript

I have been delving into TS and Angular. I initially attempted to update my parent component array with an EventEmitter call. However, I later realized that this was unnecessary because my parent array is linked to my component variables (or so I believe, ...

javascriptangulartypescript

The .env file is functioning properly for the current keys, but any new ones I include remain undefined

Recently, I took over a Vue application that utilizes axios. Within the dataService.js file, it retrieves URLs from a project's .env file using process.env.FOO_BAR for GET requests. The pre-existing key-value pairs such as VUE_APP_DATA_URL function p ...

javascriptvue.jsenvironment-variablesvue-clidotenv

Ways to smoothly conclude a loading animation in real-time

I have a unique challenge of creating a loading animation using Adobe After Effects instead of CSS. The main goal is to develop an animation that continuously loops, but when the loading process stops, it ends with a distinct finishing touch. For instance, ...

javascriptloopsanimationloadingafter-effects

Retrieving various properties of an object by matching IDs and displaying them without repeated reductions

I'm interested in finding a more efficient way to retrieve properties from a reduced object within a Vue component or wrapper DOM element. Let's say I have these two data objects in my component: player: [{ active: true, id: 0, name: &q ...

javascriptvue.jsvuejs3

Is it possible for a JSON array to consist of objects with varying key/value pairs?

Is it possible for a JSON array to contain objects with different key/value pairs? The example provided in this tutorial shows objects within the JSON array having the same key/value pair: { "example": [ { "firstName": " ...

javascriptarraysjson

The width:auto attribute for images in ie6 is not functioning as expected

I am facing a challenge with dynamically changing and resizing an image element to fit its container. My current approach involves: Resetting the image: // Ensuring the 'load' event is re-triggered img.src = ""; // Resetting dimensions img. ...

javascripthtmlcssinternet-explorerinternet-explorer-6

Tips for utilizing a printer to print HTML content in PHP

I've stored HTML content in a variable as shown below: $message ="<div> <table align='center'> <tr><td><h1>Tipo de Documentos Report</h1></td></tr> <tr><td>< ...

phpjavascript

Tips for broadcasting the blob

I am currently working on a radio system project that involves streaming live audio from a microphone to the user in real-time. However, I am new to using node.js and unsure of how to achieve this. Can anyone provide guidance on how to stream the audio fro ...

javascripthtmlnode.js

Tips for incorporating PHP $_SESSION data into a JavaScript file

What I've been doing is using $_SESSION['siteRoot'] to store the root address of my website (since it's part of a framework and can vary depending on how the site is accessed). The challenge now is incorporating this value into some of ...

javascriptphpsession