Search jQuery

jQuery Forum

Cluetip Question

in Using jQuery Plugins • 10 years ago

I have gotten Cluetip to work on other parts of our website, but for some reason it is not working on this part. We are using HiFi (www.gethifi.com) for our CMS. We are also using Datatables (www.datatables.net). The table contains the link to trigger inline content tooltip. If you go to http://compassbiblechurch.tryhifi.com/ministries/pastor-mike?show=all_sermons you can see that Cluetip is hiding the inline content tooltip correctly, but when you hover over paper icon, nothing happens. Below is the code. Thank you in advance for your help.

<table class="message_table" cellspacing="0" cellpadding="0" id="sermons_all">
<thead>
<tr>
<th class="hide"><a href="#">Series</a></th>
<th class="hide"><a href="#">Series Date</a></th>
<th><a href="#">Title</a></th>
<th class="center"><a href="#">Passage</a></th>
<th class="center"><a href="#">Date</a></th>
<th class="hide"><a href="#">Categories</a></th>
<th class="hide"><a href="#">Description</a></th>
</tr>
</thead>
<tbody>
{% for series in hifi.get({type: 'page', orderBy: 'publishedAt', 'children':{'messages':{'type':'page', orderBy: '-publishedAt'}}, parent: this.id, relations: '*'}) %}
{% for message in series.children.messages({relations: '*'}) %}
<tr>
<td class="group hide"><b><a href="{{ series.children.messages[0].url }}">{{ series.title }}</a></b> <a class="icon tooltip" href="#" rel="#{{ series.title|lower|replace(' ','-')|replace("'","-") }}" title="{{ series.title }}"><img src="{{ hifi.url.images }}icon_document.png"></a></td>
<td class="hide">{{ series.publishedAt|date("M. d, Y") }}</td>
<td class="indent first"><a href="{{ message.url}}">{{ message.title }}</a></td>
<td class="center">{{ message.excerpt|striptags }}</td>
<td class="center">{{ message.publishedAt|date("M. d, Y") }}</td>
<td class="hide">{% for category in series.relations.category %}{{ category.title }} {% endfor %}</td>
<td class="hide">{{ series.content }}</td>
</tr>
{% endfor %}
<div class="tooltip_content" id="{{ series.title|lower|replace(' ','-')|replace("'","-") }}">{{ series.content }}<span><a href="{{ series.children.messages[0].url }}">Visit series »</a></span></div>
{% endfor %}
</tbody>
</table>

Replies(5)

ministryp..

Re: Cluetip Question

10 years ago

Anyone know how to make this work? Thanks in advance!

kswedberg

Re: Cluetip Question

10 years ago

Hi there,

I haven't used the Datatables plugin before, but the problem appears to be that with each redraw of the table the events bound to elements within the table are removed. Probably your best bet is to put your line calling .cluetip() into a Datatable callback. I see the plugin has a number of callbacks listed on this page: http://datatables.net/usage/callbacks

It looks like you could just add the .cluetip() call to the end of the fnDrawCallback option in your code (again, I've never used Datatables, so there might be a better approach or a more suitable callback to use):

$(document).ready(function() {
var oTable = $('#sermons_all').dataTable({
"fnDrawCallback": function ( oSettings ) {
// all your other stuff draw callback stuff...
oTable.find('a.tooltip').cluetip({local:true, cursor: 'pointer'});
},
// your other options
});
});

--Karl

ministryp..

Re: Cluetip Question

10 years ago

Karl,

Thank you so much for your help. It seems that no mater where I put

oTable.find('a.tooltip').cluetip({local:true, cursor: 'pointer'});

it breaks the datatables code. Any other suggestions? Thanks!

kswedberg

Re: Cluetip Question

10 years ago

not sure. maybe you could ask the author of the Datatables plugin? To see what I'm getting at, do this:

1. reload the page

2. open your browser's console (firebug, chrome dev tools, etc.)

3. paste the following and then press Enter: oTable.find('a.tooltip').cluetip({local:true, cursor: 'pointer'});

Hovering over the page icons should show the tooltips.

4. change the number of items to show

hovering over the page icons will not show the tooltips

5. repeat step 3.

hovering over the page icons should show the tooltips.

~~~~~

It's just a matter now of figuring out where to include that call to .cluetip() from within a datatable callback.

One more thing: check out the error console. it looks like you're getting an error regarding an addMethod function ("Uncaught TypeError: Cannot call method 'addMethod' of undefined")

--Karl

ministryp..

Re: Cluetip Question

10 years ago

Thanks Karl. I will try this. Really appreciate your help.

Top Reply

Response title

Attachments

jQuery Forum

Cluetip Question

Replies(5)

Re: Cluetip Question

Re: Cluetip Question

Re: Cluetip Question

Re: Cluetip Question

Re: Cluetip Question

Statistics

Tags

Actions

Related Posts