CODEWITHSUNDEEP
jquerycssjquery-tooltip
user1896653
user1896653

Reputation: 3327

How to identify multiple tooltip by css class

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

Upvotes: 0

Views: 1600

Answers (1)

Arron
Arron

Reputation: 916

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?

Upvotes: 1

Related Questions