In Tooltipster, can something like self.next() or self.children() be used as data-tooltip-content?
If an element with class="tooltip" points to a named element, that named element will be the tooltip’s content. Cool. Below, the list of features pops up when the model number is moused-over.
Is there a way to do this without giving a separate id to each content element? Can I tell Tooltipster to just use the next element?
<style type="text/css">
.tooltip-content {display:none}
.tooltipster-base .tooltip-content {display:block}
</style>
<span class="tooltip" data-tooltip-content="#tc1">Model 2000X</span>
<ul class="tooltip-content" id="tc1">
<li>Red</li>
<li>Platinum</li>
<li>32 cu in.</li>
</ul>
<span class="tooltip" data-tooltip-content="#tc2">Model 3000X</span>
<ul class="tooltip-content" id="tc2">
<li>Blue</li>
<li>Gold</li>
<li>64 cu in.</li>
</ul>
Or, what about children instead of successor? Here the content is inside the tooltip span instead of after it:
<span class="tooltip" data-tooltip-content="#tc1">Model 2000X
<ul class="tooltip-content" id="tc1">
<li>Red</li>
<li>Platinum</li>
<li>32 cu in.</li>
</ul>
</span>
For what I need, either—or even something similar—would be fine. I just want to avoid naming all the content elements, and instead use position to identify content.
How about
$('.tooltip').tooltipster({
functionInit: function(instance, helper){
instance.content($(helper.origin).next().detach());
}
});