Cluetip works fine in IE
But in Firefox/Safari....
I am displaying multiple cluetips(7). Each cluetip corresponds to a
different event on our calendar, in theory and for discussion
purposes, one for each day of the week.
Hovering over the first link (sunday) yields a cluetip with a title
and content, however, the content corresponds to the last link
(saturday). In safari - it is displaying content from the third link.
Hovering over any subsequent link shows only a title and no content.
I have moved the link around within the content - to no avail. So, ie,
it does not matter if the link is within the rel class or within it.
(see the difference between Sunday and Monday below)
If I remove the links from the content, everything works fine.
My goal is to have my content sticky and clickable/linkable. Right
now, I am relying soley on the initial link portion for linking. On
hover, I would like the cluetip to cover up the original link and that
the cluetip popup be clickable to the relevant page.
html notes....
example cluetip link <a href='/Store/select.aspx?sid=15454'
class="cell_link" rel=".nxt_billing" title="SUNDAY">
the static content is contained within the hd and ft divs - the popup/
cluetip content is within the bd div
**note I have also tried linking the rel to bd - but this created even
more issues as I have other bd divs within the page
html code....(jquery call is below)
<div class="container">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href='/Store/select.aspx?sid=15454'
class="cell_link" rel=".nxt_billing" title="SUNDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Wed 06/24</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15454";);' border="0"
src="/Resources/Images/Venues/thumbsm/newbordergray.png" /></div>
<div class="bd">
<a class="linktip" href='/Store/
select.aspx?sid=15454'>
<div class="nxt_billing">
<img border="0" src="/
Resources/Images/Venues/thumbsm/newbordergray.png" align="right"
class="imagetip" />
<dl><dt>THE SWARGE<dd>EGGO
& STACY</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$8 ADV / $12
DOS</dd><dd>All Ages</dd></dt></dl>
</div>
</a>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
<td>
<a href='/Store/select.aspx?sid=15452'
class="cell_link" rel=".nxt_billing" title="MONDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Thu 06/25</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15452";);' border="0"
src="/Resources/Images/Acts/thumbsm/Dynamo.jpg" /></div>
<div class="bd">
<div class="nxt_billing">
<a class="linktip" href='/Store/
select.aspx?sid=15452'>
<img border="0" src="/
Resources/Images/Acts/thumbsm/Dynamo.jpg" align="right"
class="imagetip" />
<dl><dt>THE DYNAMO<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$10 ADV / $15 DOS</
dd><dd>21+</dd></dt></dl>
</a>
</div>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
<td>
<a href='/Store/select.aspx?sid=15430'
class="cell_link" rel=".nxt_billing" title="TUESDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Fri 06/26</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15430";);' border="0"
src="/Resources/Images/Acts/thumbsm/livecrow.jpg" /></div>
<div class="bd">
<a class="linktip" href='/Store/
select.aspx?sid=15430'>
<div class="nxt_billing">
<img border="0" src="/
Resources/Images/Acts/thumbsm/livecrow.jpg" align="right"
class="imagetip" />
<dl><dt>LIVE CROW &
FRIENDS<dd>SPECIAL GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>
$16.75 ADV / $22 DOS</dd><dd>21+</dd></dt></dl>
</div>
</a>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
<td>
<a href='/Store/select.aspx?sid=15455'
class="cell_link" rel=".nxt_billing" title="WEDNESDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Fri 07/10</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15455";);' border="0"
src="/Resources/Images/Venues/thumbsm/newbordergray.png" /></div>
<div class="bd">
<a class="linktip" href='/Store/
select.aspx?sid=15455'>
<div class="nxt_billing">
<img border="0" src="/
Resources/Images/Venues/thumbsm/newbordergray.png" align="right"
class="imagetip" />
<dl><dt>THE LEEB<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$10 ADV / $15 DOS</
dd><dd>All Ages</dd></dt></dl>
</div>
</a>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
<td>
<a href='/Store/select.aspx?sid=15441'
class="cell_link" rel=".nxt_billing" title="THURSDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Fri 07/17</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15441";);' border="0"
src="/Resources/Images/Acts/thumbsm/bees.jpg" /></div>
<div class="bd">
<a class="linktip" href='/Store/
select.aspx?sid=15441'>
<div class="nxt_billing">
<img border="0" src="/
Resources/Images/Acts/thumbsm/bees.jpg" align="right"
class="imagetip" />
<dl><dt>THE BEES<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$25</dd><dd>All
Ages</dd></dt></dl>
</div>
</a>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
<td>
<a href='/Store/select.aspx?sid=15444'
class="cell_link" rel=".nxt_billing" title="FRIDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Sat 07/25</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15444";);' border="0"
src="/Resources/Images/Acts/thumbsm/pardon.jpg" /></div>
<div class="bd">
<a class="linktip" href='/Store/
select.aspx?sid=15444'>
<div class="nxt_billing">
<img border="0" src="/
Resources/Images/Acts/thumbsm/pardon.jpg" align="right"
class="imagetip" />
<dl><dt>PARDON<dd>SPECIAL
GUEST</dd><dd>Doors: 11:30 / Show: 11:45 PM</dd><dd>$25 ADV / $30 DOS</
dd><dd>All Ages</dd></dt></dl>
</div>
</a>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
<td>
<a href='/Store/select.aspx?sid=15450'
class="cell_link" rel=".nxt_billing" title="SATURDAY">
<div class="evt_dialog">
<div
class="content">
<div
class="hd">
Wed 08/26</div>
<div class="ft"><img onclick='javascript:
redirect("http://localhost/Store/select.aspx?sid=15450";);' border="0"
src="/Resources/Images/Acts/thumbsm/Whois.jpg" /></div>
<div class="bd">
<a class="linktip" href='/Store/
select.aspx?sid=15450'>
<div class="nxt_billing">
<img border="0" src="/
Resources/Images/Acts/thumbsm/Whois.jpg" align="right"
class="imagetip" />
<dl><dt>WHOIS<dd>SPECIAL
GUEST</dd><dd>Doors: 8:30 / Show: 09:00 PM</dd><dd>$10 ADV / $15 DOS</
dd><dd>All Ages</dd></dt></dl>
</div>
</a>
</div>
</div>
<div class="b"><div></div></div>
</div>
</a>
</td>
</tr>
</table>
</div>
JQuery code:
$('.nextcontainer a.cell_link').cluetip(
{
hoverIntent: {
sensitivity: 1,
interval: 300, //mouseover
timeout: 400 //mouseout
},
local: true,
cluetipClass: 'jtip',
showTitle: true, // hide the clueTip's heading
mouseOutClose: true,
closePosition: 'title',
closeText: '<img src="/Images/cross.png" alt="close" />',
hideLocal: false
}
);
