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>

Answer 2

Just like Michal said, here's the solution:

http://jsfiddle.net/adaz/6jfDc/

Answer 3

You can't using the plugin as it is.

The plugin generates the following HTML markup:

<div id="cluetip">
    <div class="cluetip-outer">
        <h3 class="cluetip-title />
        <div class="cluetip-inner" />
    </div>
</div>

Looking at the source code of the plugin ( GitHub ):

/***************************************
* load an element from the same page
***************************************/
      } else if (opts.local) {
        var $localContent = $(tipAttribute + (/^#\S+$/.test(tipAttribute) ? '' : ':eq(' + index + ')')).clone(true).show();
        if (opts.localIdSuffix) {
          $localContent.attr('id', $localContent[0].id + opts.localIdSuffix);
        }
        $cluetipInner.html($localContent);
        cluetipShow(pY);
      }
    };

The "local content" (from you div in your situation) is appended to $cluetipInner which is the element div.cluetip-inner . The <h3> element gets completely ignored.

---

Note: about the splitTitle options, documentation says:

splitTitle: if used, the clueTip will be populated only by the title attribute