2 Replies Latest reply: Jan 24, 2008 11:34 AM by jefbak RSS

    How do I combine Tooltips with Collapsible Panel

    jefbak Community Member
      Hi,
      I am trying to add a tooltip to my collapsible panels using spry 1.6
      I have the panels start off closed and need a tip to tell users to click to expand the panels.
      How or can I combine these widgets?
      Example Page Link
        • 2. How do I combine Tooltips with Collapsible Panel
          jefbak Community Member
          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).