Implementing Vuetify tooltips in a datatable

Attempting to incorporate tooltips into a vuetify datatable, but encountering issues.

Below is the required template for using a tooltip:

<template v-slot:item.state="{ item }">
   <div :class="lights(item)"></div>
</template>

Implementation:

<v-tooltip left>
      <template v-slot:activator="{ on }">
         <template v-slot:item.state="{ item }">
           <div :class="lights(item)"></div>
         </template>
      </template>
   <span>Tooltip</span>
</v-tooltip>

There is also a modal that requires a tooltip with a v-slot activator:

<template v-slot:activator="{ toggle }">
   <v-tooltip bottom>
       <template v-slot:activator="{ on }" >
            <v-icon :color="color" v-on="on" v-on="toggle">mdi-power</v-icon>
        </template>
         <span>Tooltip</span>
    </v-tooltip>
</template>

Seeking assistance on how to proceed with the implementation.

Answer №1

Almost there. Your structure needs a bit of adjustment and an essential feature is missing.

Here's the refactored structure for you:

<template v-slot:item.state="{ item }">
  <v-tooltip left>
    <template v-slot:activator="{ on }">
      <div :class="lights(item)" v-on="on"></div>
    </template>
    <span>Tooltip: {{ item.yourKeyHere }}</span>
  </v-tooltip>
</template>

To activate the hover mechanism using on, you need to set v-on="on" within the div[class="lights(item)"] template of the td row.

Check out the modified working example below, based on the Vuetify docs v-data-table example for customizing default rows (alt)

Edit: Include nested components (dialog with a tooltip) using the same default activator template syntax. (Click on the 'Fat' value in a row, then hover over dialog text to display the tooltip)

Vue.config.productionTip = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
...

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

Manipulating front matter metadata when reading/writing a markdown file in Node.js

I have a large collection of markdown files that I need to update by adding new data to their front matter metadata. Currently, the file structure looks like this: --- title: My title here --- Markdown content here My goal is to include an id property ...

Can these similar functions be combined into a single, unified function?

Currently, I have 3 functions - and more to come soon - that all perform the same task. However, they control different enumerated divs/variables based on which div triggers the mousewheel event. I am wondering if there is a way to condense these very si ...

Tips for utilizing template tags with the Vue root component

As I work on improving a page within a web application with Vue, I have typically written single file components and have preferred defining the html template at the start of the file using the <template> tag. Is there a method to utilize this tag w ...

Receiving a reply from the axios function

Whenever I try to call the lookUpItem function from ItemSearch.vue, I always get an undefined response. Code snippet from ItemSearch.vue: <script setup lang="ts"> import { lookUpItem } from '../systemApi' async fu ...

The transition from ExtJS 4 to ExtJS 5: A comprehensive guide

We're in the process of transitioning a web application from ExtJS 4 to ExtJS 5. Upon testing the index.html, we encountered an error message (displayed in the Firefox-FireBug-console): NetworkError: 404 Not Found - http://localhost:8080/ext/build/e ...

Removing zeros from a one-dimensional tensor in TensorFlow.js: A step-by-step guide

If I have a 1D tensor (distinct from an array) with the values [0,2,0,1,-3], my goal is to retrieve only the non-zero values. Using the example provided, I want to receive [2,1,-3] as the output. Is there a way to achieve this in TensorFlow.js? ...

How to Extract Calendar Week Numbers in React from a Specific Month

Is there anyone who can assist me in calculating the week numbers for a specific month? For instance, July is expected to have week numbers 26, 27, 28, 29, and 30. How can I accomplish this task and store the results in an array? Currently, I am only abl ...

Tips for creating a vertical scrollbar within a row component

Is there a way to create a scrollable parent v-row with a child v-row overflowing with content so that I can nest another v-row inside the v-col and ensure it remains within the scroll element? <v-row> <v-col> <v-row> <p ...

Update the numerical data within a td element using jQuery

Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...

When the clearOnBlur setting is set to false, Material UI Autocomplete will not

I recently encountered an issue in my project while using Material UI's Autocomplete feature. Despite setting the clearOnBlur property to false, the input field keeps getting cleared after losing focus. I need assistance in resolving this problem, an ...

Is there a way for me to configure my website so that when a link is clicked, my PDF file will automatically open in Adobe

I've been facing an issue where I need my users to access a specific PDF file from a link on my website. Currently, the PDF opens in a separate tab next to my site, but ideally, I would like it to be forced to open in Adobe Reader directly. Is this ac ...

Implementing server authentication with Faye in Node.js

As a complete newbie to node.js and faye, I'm struggling with the basics and not sure what questions to ask. This is how my faye server setup looks like, running on Nodejitsu: var http = require('http'), faye = require('faye' ...

I must extract all the information from the webpage within the HTML tags, however, I am unsure of which specific tag to target for the data extraction

Here is the example of HTML code that includes a price: <meta itemprop="price" content="121080"> I have created this search code, but I am unsure which tag to use for finding the price: const puppeteer = require('puppeteer&a ...

Adding labels to a JavaScript chart can be done by using the appropriate methods

https://i.stack.imgur.com/uEgZg.png https://i.stack.imgur.com/y6Jg2.png Hey there! I recently created a chart using the Victory.js framework (check out image 1) and now I'm looking to incorporate labels similar to the ones shown in the second image ab ...

Updating parent array values within child components in React

Currently, I am working on a React application where I need to save the handlers for all windows opened from the app. Previously, before using React, I stored these windows in a global array attached to the parent window, although I understand that using J ...

Unusual issue encountered when launching an express application in node.js

Starting my app is easy with nodemon - just type nodemon However, I encountered an error when trying node app.js https://i.sstatic.net/rRXhZ.png I have checked my package.json and it is properly configured with: "scripts": { "start": "node ./bin/ww ...

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

I am currently working on an HTML project <div class="ktmsg"> <ul> <li class="a1"> <a title="Link Tools" href="#"> … </a> </li> <li class="a2"> <a title="Link Tools" href="#"> ...

Extracting the color of a text layer with PSD.JS

Currently, I am utilizing PSD.JS (an efficient photoshop PSD file parser designed for both NodeJS and browsers) to decode several PSD files. Upon extraction of information from a text layer by the parser, color data is returned in the form of an array. Fo ...

Constructing a regular expression

I've been exploring JavaScript regular expressions and encountering some challenges while trying to build a larger one. Therefore, I have decided to seek help for the entire problem rather than just individual questions. What I am looking for is a re ...

Nuxt.js - Which specific files and directories are required for deploying the production version on a hosting platform?

Visit this link for more information I am facing a challenge in deploying Nuxt to live hosting as there seems to be no clear indication of the required files. When using Nuxt CLI, it generates empty folders like: - assets - components - layouts - ...