Question

我已在我的网页上使用此tooltip。我的问题是，我使用了多个样式和功能的工具提示。所以，我通过独特的类名来识别它们。例如，我有两个工具提示：

<div class="tooltip" title="First Tooltip<span class='close'></span>"> 
        This div has a tooltip when you hover over it!
</div>
<div class="tooltip-1" title="<a href='#'>Second Tooltip</a>"> 
        This div has a tooltip too when you hover over!
</div>

我可以通过他们的班级名称来调用他们的函数：

$('.tooltip').tooltipster({
    interactive: true,
    contentAsHTML: true,
});

$('.tooltip-1').tooltipster({
    interactive: true,
    contentAsHTML: true,
    position: 'bottom'
});

但是，我不能通过他们的班级名称使他们的风格不同。例如，我尝试通过css在我的第二个工具提示中应用不同的样式。但是，它没有用！

.tooltip-1 .tooltipster-default {
    background-color: #fff;
    color: #333;
}
.tooltip-1 .tooltipster-default .tooltipster-content {
    padding: 0;
}
.tooltip-1 .tooltipster-content a {
    padding: 8px 10px;
    display: block;
    color: #333;
}

那么，如何在我的第二个工具提示中应用不同的风格？

My fiddle work

Answer 1

只需使用2个班级，..

<div class="tooltip tooltipStyle_1"></div>
<div class="tooltip tooltipStyle_2"></div>

然后按照您想要的方式设置两个辅助类的样式。

此外，......它可能正在运作，但是

<div title="bla <someTag>bla</someTag>">

难道你不能这样做吗？

如何通过css类识别多个工具提示

1 个答案: