Vue.js中v-bind：title的样式悬停文本框

klsxnrf1 于 2023-03-31 发布在 Vue.js

关注(0)|答案(3)|浏览(217)

我需要在我的Vue.js应用程序中以悬停文本的形式显示详细信息。根据这个博客（https://www.geeksforgeeks.org/create-a-hover-effect-in-vue-js/），我可以将悬停文本显示为'v-bind：title =' parameter '。它可以工作，但样式看起来很基本。但是有没有一种方法可以样式化该文本框？或者我走错了路，我应该以其他方式实现悬停文本框？
这是我的vue.js前端代码的一个片段。

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

我尝试将v-bind：style添加到div中，但这会使我的div着色，而不是悬停文本框：

<td>
  <div :class="myclass" v-bind:title="detail_info" v-bind:style="{'background-color': '#000000'}">{{ status }}</div>
</td>

vue.js

来源：https://stackoverflow.com/questions/75880220/style-hover-text-box-of-v-bindtitle-in-vue-js

3条答案

按热度按时间

vnzz0bqm1#

在HTML中无法设置title属性的样式，但如果您想更改title的文本/背景颜色，则需要考虑使用Tooltip。
1.从工具提示包开始，而不是使用原生html（推荐）。有一个包你可以考虑：https://github.com/Akryum/floating-vue
1.使用CSS创建工具提示：https://www.w3schools.com/css/css_tooltip.asp

赞(0）回复(0）举报 2023-03-31

3htmauhk2#

是的，有一种方法可以设置工具提示或悬停文本框的样式。您可以使用CSS通过使用::before伪元素定位title属性来设置默认工具提示外观的样式。下面是一个使用div标签和title属性的标准浏览器工具提示的CSS样式示例：

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

这将样式化工具提示，你可以修改它以满足你的需要。虽然内置的浏览器工具提示的样式可能性相当有限。我建议你建立自己的自定义工具提示，这实际上并不复杂。
自定义工具提示可以是div（或其他元素）。正因为如此，设置工具提示的样式要容易得多，你可以使用内置的函数，如CSS :hover或Javascript mouseover事件。在vue中，它将是v-on:mouseover="mouseover"。你只需要创建和设置一个工具提示元素/类的样式，一旦你悬停在某个东西上，它就会显示出来。工具提示中的数据可以用JS插入，CSS位置应该是absolute，这样你就可以很容易地用客户端的鼠标光标坐标移动它。

赞(0）回复(0）举报 2023-03-31

ss2ws0br3#

这是一个CSS问题，而不是Vue.js
您正在尝试设置title属性的样式，这是不可能的。
检查这些答案如何以另一种方式做到这一点：