How do I add a heading to a cluetip tooltip, when I am sourcing content from a hidden div (versus title attribute)

Question

I am using cluetip which works great but the content of one of my tooltips is getting very big so I want to move it from sitting inside the local title attribute into a seperate and hidden div.

This works fine except for the fact that I can't figure out how to add a title to the Tooltip. When I had the title attribute content here was my tooltip code:

$('#subscribe').cluetip({
    cluetipClass: 'jtip',
    activation: 'click',
    topOffset: 10,
    leftOffset: -175,
    splitTitle: '|',
    sticky: true,
    closePosition: 'title',
    arrows: true
});

and here is my new code with the hidden div:

$('#subscribe').cluetip({
    local:true,
    cluetipClass: 'jtip',
    activation: 'click',
    topOffset: 10,
    leftOffset: -175,
    sticky: true,
    closePosition: 'title',
    arrows: true
});

As you can see splitTitle: '|' goes away and local:true gets added (as it seem like the tooltip is empty if I include "splitTitle" when using local: true.

Given that I can't use splitTitle, how can I have a title at the top of my cluetip tooltip when I am sourcing the tooltip from a hidden div. In the demo example on the website, it seems like none of the examples using hidden divs show a heading.

Answer 1

You can set a tooltip title attribute by setting a "title" attribute on the tooltip triggering element. So your HTML will look like

<!-- your trigger -->    
<a class="load-local" href="#loadme" rel="#loadme" title="Put your tooltip title here">
    I trigger tooltip
</a>
<!-- your local tooltip -->
<div id="loadme">
    this is hidden local content
</div>