This content has been marked as final.
Show 2 replies
-
1. Re: How do I combine Tooltips with Collapsible Panel
1233andrew_jones Jan 24, 2008 11:05 AM (in response to jefbak) -
2. How do I combine Tooltips with Collapsible Panel
jefbak Jan 24, 2008 11:34 AM (in response to jefbak)Yes I have looked through the samples but I have not seen anything to help me with this combination.
Okay, I admit I am slow at learning spry, but here is the answer for anyone else out there like me - slow and using spry 1.6:
Here are the basics for the web page:
js
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script type="text/javascript" src="SpryAssets/SpryTooltip.js"></script>
css
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="SpryAssets/SpryTooltip.css">
collapsible panel class
<div class="CollapsiblePanelTab" tabindex="0">
tooltip content (placed below last collapsible panel)
<table style="display: none; position: absolute; top: 0px; left: 0px;" id="tooltips" class="tooltip">
<tbody><tr>
<td>Click to expand and collapse the section</td>
</tr>
</tbody></table>
VARs ussed (placed the tooltip var after the last panel var)
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
var multiple_tooltip = new Spry.Widget.Tooltip('tooltips', '.CollapsiblePanelTab');
tooltip css for this setup
.iframeTooltip
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
.tooltip {
background-color: #ffffcc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#multipleTip {
width: 300px;
float: left;
}
#tooltip1 {
border: 1px;
width: 400px;
}
This did the trick for me, but a combination example in the samples section really would have helped (I could not find one that I could figure out and apply to my situation at my current skill level).

