造型多個數據工具提示

Question

我使用data-tooltip創建了我的網站上的多個工具提示。問題是它是一個屬性，所以我不能只在它前面應用一個類並使用它。所以，我要的是例如不同寬度的一個提示或不同顏色等

這是在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>