0

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.

Starx
  • 77,474
  • 47
  • 185
  • 261
leora
  • 188,729
  • 360
  • 878
  • 1,366

3 Answers3

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>
James Cazzetta
  • 3,122
  • 6
  • 32
  • 54
Michal
  • 13,439
  • 3
  • 35
  • 33
1

Just like Michal said, here's the solution:

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

Adaz
  • 1,627
  • 12
  • 14
0

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

Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
  • thanks for your research . . .I understand and read that splitTitle only works by using the title attribute. It just seems like an obvious gap that you can't easily set a title using local content or ajax response . . . why would the functionality be different just because the data source of the content is different? – leora Jan 03 '12 at 14:11
  • The same behavior happens with ajax-loaded tooltip. I don't know if it can be considered as just another data source, the data structure is also different (title = pure text, ajax/local = markup (expected at least)). I think your best shot would be to hide the header if it is empty for instance (with `onActivate` or `onShow` callbacks) – Didier Ghys Jan 03 '12 at 14:27
  • thanks for the reply . . conceptually (IMO) it does seem like just another source of data (regardless how the API is built). IMO the functionality and "data sourcing" would be decoupled and unrelated – leora Jan 03 '12 at 14:29