V-toolip using a different design [vuetify]

I have a v-data-table configured with 5 columns and I want to add a text as a v-tooltip component. However, since it's all in one template, I am unable to use the tooltip on it without the 

<template #activator="{ on }">
. Can anyone advise me on how to achieve this?

Below is an excerpt of what one of my columns looks like in the code.

<template #item.title2="{ item }">
  <div class="ellipsis news">
    <a
      target="_blank"
      v-if="item.file != ''"
      class="links1"
      :href="item.file"
      v-on="on"
    >
      <span style="color:white"> {{ item.title }} </span>
    </a>
  </div>
</template>

My goal is to wrap the v-tooltip around this code snippet, but encountering a specific message while attempting to do so.

https://i.sstatic.net/5E51c.png

When hovering over my v-data-table, specifically the 'news' and 'actors' fields, I would like their details to be displayed.

https://i.sstatic.net/pDJtG.png

cssvue.jsvuejs2vuetify.jsv-data-table

Answer №1

If you find yourself without a second slot for #activator, simply insert the <v-tooltip> element between the column item slot and the tooltip's activator slot

<template #item.title2="{ item }">
  <v-tooltip bottom>
    <template #activator="{ on, attrs }">
      <div class="ellipsis news" v-bind="attrs" v-on="on">
        <a
          target="_blank"
          v-if="item.file != ''"
          class="links1"
          :href="item.file"
        >
          <span style="color: white"> {{ item.title }} </span>
        </a>
      </div>
    </template>
    <span>Im A ToolTip</span>
  </v-tooltip>
</template>

This code example does not demonstrate usage of a second #activator slot, but if you encounter nested activators, refer to the documentation on the v-menu page for guidance

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

OO Design for CSS Style Elements

I'm curious about the most effective way to implement objective-oriented CSS for quick and clean reuse of components. Scenario 1: HTML: <button class="button button-submit">Submit</button> CSS: .button { /* basic styles */ } .button ...

htmlcssoocss

What's the best way to eliminate blank space in my Bootstrap grid columns?

I'm facing an issue with the search filter layout on my website. It includes input fields for a search term, two datepickers, and two buttons: <div id="search-holder"> <div id="search-box"> <div ...

htmlcsstwitter-bootstrapbootstrap-4

What's the deal with that see-through navigation bar?

As I scroll down the page, the navigation bar sticks to the top and the content continues scrolling up behind it. It gives the effect that the navigation bar is transparent. Find the code at this link. <html lang="en> <head> <meta charset= ...

vue.js

I am facing an issue where the components are not being displayed by the Vue3 router

For my latest project, I decided to use Vue3. The first project I worked on using components and routers functioned perfectly. However, I have encountered an issue with calling the Header and Router Component in my Home page. It seems to be opening another ...

vue.jsvue-componentvue-routervuejs3

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

csstwitter-bootstrapicons

I'm encountering an unfamiliar plugin type in Nuxt 3

Within my Nuxt 3 application, I have developed a custom plugin located in the plugins/ folder. // plugins/customPlugin.ts export default defineNuxtPlugin(() => ({ provide: { hello: (msg: string) => console.log(`This is your message: ${msg}` ...

vue.jsnuxt.jsnuxt3.js

Is there a way to automatically change the display of an element once the user has closed the menu?

How can I ensure that the display of an element remains unchanged when a user opens and closes my website menu using JavaScript? ...

javascripthtmljquerycss

A new ASP.NET MVC-5 web application is missing the class definition for "input-validation-error."

I recently created a new ASP.NET MVC-5 web application using Visual Studio 2013. When I attempted to use the built-in login form and left the required fields empty, I noticed that the fields were not highlighted in red as expected. https://i.sstatic.net/m ...

cssasp.netasp.net-mvcasp.net-mvc-5

Schema Object for Validating Vue Prop Types

React allows you to specify that a prop is an object and define the types of its properties, known as the shape. However, in Vue, it appears that the only method available to determine if an object matches a specific shape is by using the validator funct ...

validationvue.jsvuejs2

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

The application of styling to a CSS class is unsuccessful when the class is dynamically added through Angular

My goal is to create a header that moves with the page and stays fixed once it reaches the top. I am using Angular and came across a solution on Stack Overflow which suggested binding a class toggle to the window scroll event to achieve this effect by addi ...

htmlcssangularjs

RStudio Connect now automatically inserts CSS code into cells when updating

My current project involves creating an app for holiday requests. The main page of the app is displayed like this: https://i.sstatic.net/z2qma.png At the bottom right corner, you'll notice a column labeled "Accepted?" which displays either "OK" or " ...

cssrshinyrsconnect

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

Utilizing Vue3: Leveraging Functions Across Components

After starting to work with Vue3, I decided to create a basic app that allows users to add items to a list. The app consists of two components: ItemList and ItemForm, both added to the main component App.vue like this: App.vue - simplified <template&g ...

vue.jsvuejs3

The presence of a tilde (~) character in folder names causes Laravel webpackChunkName to incorrectly create folders for chunks files

I'm in the process of developing a web application using Laravel and Vue.js. I'm creating dynamically loaded chunk files using Webpack Mix. However, when I run npm run watch or npm run prod, it generates some folders with incorrect names containi ...

laravelvue.jswebpackwebpack-splitchunksvue-dynamic-components

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

Modify the text color of the sliderInput element within a Shiny application

I am attempting to change the font color of the values (1,2,3,...10) in the sliderInput() from black to white, but I am encountering difficulties. How can I connect the slider with the CSS file to achieve this? ui <- fluidPage( tags$style(type = &quo ...

cssrshiny

The functionality of toLowerCase localeCompare is restricted in NuxtJs VueJs Framework

Encountered a peculiar issue in NuxtJs (VueJs Framework). I previously had code that successfully displayed my stores in alphabetical order with a search filter. When I tried to replicate the same functionality for categories, everything seemed to be work ...

javascriptsearchvue.jsvuetify.jsnuxt.js

Is your Bootstrap button displaying a blue border?

Recently, I incorporated buttons into my website using a bootstrap template. However, after customizing the button colors, I discovered an annoying blue outline appearing around each button. Despite numerous attempts, I have been unsuccessful in eliminatin ...

cssbootstrap-4

How can we calculate the `rotate` value for a CSS transform using a formula

Referencing this particular fiddle, I've developed a unique custom underline technique utilizing transform: skew(-30deg) rotate(-2deg);. Is there a way for me to substitute the static -2 with a dynamic formula based on the element's width? For ...

csssass