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

Question

I've used this tooltip at my webpage. My problem is, I'm using multiple styled and functional tooltip. So, I've to identify them by unique class name. For example, I've two tooltips:

<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> 

I can make their function different by calling them with their class name:

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

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

But, I can't make their style different by their class name . For example, I'm trying apply different style at my second tooltip by css. But, it's not working!

.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;
}

So, how can I apply different style in my second tooltip ?

My fiddle work

Answer 1

Just use 2 classes,..

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

Then style both secondary classes the way you want.

Also,... it might be working,.. but

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

Can't you do that differently?