Question

我的网站上有多个工具提示，我使用data-tooltip创建。问题在于它是一个属性，所以我不能在它前面应用一个类并使用它。所以我想要的是例如一个工具提示或不同颜色等的不同宽度。

这是＆＃34; data-tooltip＆＃34;

的css示例

 [data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

Answer 1

你能提供一些额外的HTML吗？

可以使用一个类：

.my-class-1[data-tooltip] {
    width: 100px;
}

.my-class-2[data-tooltip] {
    width: 200px;
}

<div class="my-class-1" data-tooltip="true">...</div>
<div class="my-class-2" data-tooltip="true">...</div>

或者您也可以使用其他数据属性：

[data-tooltip][data-tooltip-small] {
    width: 100px;
}

[data-tooltip][data-tooltip-big] {
    width: 200px;
}

<div data-tooltip="true" data-tooltip-small="true">...</div>
<div data-tooltip="true" data-tooltip-big="true">...</div>

设置多个数据工具提示的样式

1 个答案: