0

I need to display detailed information as hover text in my Vue.js application. According to this blog (https://www.geeksforgeeks.org/create-a-hover-effect-in-vue-js/), I can display hover text as 'v-bind:title='parameter'. It works, but the styling looks pretty basic. But is there a way to style that text box? Or am I going down the wrong path and should I be implementing a hover text box some other way?

Here's a sniped of my vue.js frontend code...

<td>
  <div :class="myclass" v-bind:title="detail_info">{{ status }}</div>
</td>

I tried adding v-bind:style to the div, but that colored my div, not the hover text box:

<td>
  <div :class="myclass" v-bind:title="detail_info" v-bind:style="{'background-color': '#000000'}">{{ status }}</div>
</td>
Tolbxela
  • 4,767
  • 3
  • 21
  • 42
RuslanS
  • 13
  • 3

3 Answers3

1

You can't style the title attribute in HTML. But if you want to change the text / background color of title, you need to consider using Tooltip.

  1. Start with a tooltip package instead of using native html (Recommend). There is one package you can consider: https://github.com/Akryum/floating-vue

  2. Using CSS to create tooltip: https://www.w3schools.com/css/css_tooltip.asp

KitKit
  • 8,549
  • 12
  • 56
  • 82
1

Yes, there is a way to style the tooltip or hover text box. You can use CSS to style the default tooltip appearance by targeting the title attribute with the ::before pseudo-element. Here an example of CSS styling for the standard browser tooltip using a div tag with a title attribute:

div[title]:hover::before {
  content: attr(title);
  background-color: #000000;
  color: #ffffff;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
}

This will style the tooltip and you can modify this to fit your needs. Although the styling possibilities of the built-in browser tooltip are rather limited. I would suggest you build your own custom tooltip, which actually isn't that complicated.

A custom tooltip can be a div (or other element) that is displayed when you hover over a specific component. Because of that, it's much easier to style the tooltip and you can use built in functions like CSS :hover or Javascript mouseover event. In vue it would be v-on:mouseover="mouseover". You just need to create and style a tooltip element/class that gets displayed once you hover over something. The data in the tooltip can be inserted with JS and the CSS position should be absolute for you to easily move it with the mouse cursor coordinates of the client.

lukaskruede
  • 26
  • 1
  • 4
  • This is really nice. Wish there was a way to do transition on it though. I set position: relative on the titled element then I can add top: 40px to the :hover::before – Todd Hammer May 25 '23 at 15:36
0

This is a CSS problem, not Vue.js

You are trying to style the title attribute and this is not possible.

Check these answers on how to do it another way:

  1. How to change the style of the title attribute inside an anchor tag?
  2. HTML title attribute style
Tolbxela
  • 4,767
  • 3
  • 21
  • 42