-
1. Re: Adding Tooltip to Spry Data
Ben Pleysier Mar 1, 2010 7:08 AM (in response to Stuart Haiz)Rather than trying to get the Spry tooltip to work, try
<tr spry:repeat="eventsDS">
<td>{date}</td>
<td title="{tooltip}">{title}</a></td>
<td>{location}</td>
<td>{price}</td>
</tr>If the above is not what you want because you would rather use the Spry tooltip, please come back here.
Ben
-
2. Re: Adding Tooltip to Spry Data
Stuart Haiz Mar 1, 2010 7:35 AM (in response to Ben Pleysier)Thanks for the suggestion. I had tried that but I want to be able to apply styling.
-
3. Re: Adding Tooltip to Spry Data
Ben Pleysier Mar 1, 2010 7:58 AM (in response to Stuart Haiz)OK! Here goes:
<table width="533">
<tr>
<th width="108" spry:sort="date">Date</th>
<th width="105" id="sprytrigger1" spry:sort="title">Title</th>
<th width="98" spry:sort="location">Location</th>
<th width="202" spry:sort="price">Price</th>
</tr>
<tr>
<td>{date}</td>
<td>{title}</a></td>
<td>{location}</td>
<td>{price}</td>
</tr>
</table>
<div class="tooltipContent" id="sprytooltip1">Tooltip content goes here.</div>
<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
//-->
</script> -
4. Re: Adding Tooltip to Spry Data
Stuart Haiz Mar 1, 2010 8:57 AM (in response to Ben Pleysier)This isn't working I'm afraid! Also, I added back the repeat and moved the sprytrigger.
I'm getting there, but having trouble referncing the right tooltip for the right event. At the moment, I only have the same single tooltip showing as I mouseover each event title.
<div spry:region="ds1">
<table width="533">
<tr>
<th width="108" spry:sort="date">Date</th>
<th width="105" spry:sort="title">Title</th>
<th width="98" spry:sort="location">Location</th>
<th width="202" spry:sort="price">Price</th>
</tr>
<tr spry:repeat="ds1">
<td>{date}</td>
<td><a><span id="sprytrigger1">{title}</span></a></td>
<td>{location}</td>
<td>{price}</td>
</tr>
</table>
<div class="tooltipContent" id="sprytooltip1">{tooltip}</div>
<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
//-->
</script> -
5. Re: Adding Tooltip to Spry Data
Ben Pleysier Mar 1, 2010 6:24 PM (in response to Stuart Haiz)You are right, my previous suggestion will not work. Try the following
You'll have to setup a hidden detail region for the dataset that will be the tooltip element and will contain the information you want to display. On each of the data-rows you'll have to add the onmouseover attribute which should set the new current row so the tooltip that will display will contain the correct information for the tooltip. The code looks something similar to this:
<tr spry:repeat="ds1">
<td>{date}</td>
<td onmouseover="ds1.setCurrentRow({ds_RowID);">{title}</td>
<td>{location}</td>
<td>{price}</td>
</tr><div id="sprytrigger1">
<div spry:detailregion="ds1">
...
</div>
</div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>Because I did not test this, I may have made an error or two; the main object is the idea that will get your tooltips to work.
Ben
-
6. Re: Adding Tooltip to Spry Data
Stuart Haiz Mar 2, 2010 6:57 AM (in response to Ben Pleysier)Ben
Thanks for your time and suggestions on this. I can't get it working and have to move on to other parts of the client's site now. For the moment I am dropping back to using the title attribute and will get back to this when the work is completed, or I have some downtime of my own to spend on it!
Thanks again.



