6 Replies Latest reply: Mar 2, 2010 6:57 AM by Stuart Haiz RSS

    Adding Tooltip to Spry Data

    Stuart Haiz Community Member

      I have an xml data set of events and within it there is a tooltip element. How can I get another element to act as a trigger so my tooltip appears when I mouseover the element?

       

      My data set is displaying correctly. I'm trying to get the event title element to act as the trigger and the code that I have so far:

       

      <div spry:region="eventsDS">
              <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="eventsDS">
                  <td>{date}</td>
                  <td><a href="#tooltiptrigger">{title}</a></td>
                  <td>{location}</td>
                  <td>{price}</td>
                </tr>
              </table>
            </div>
            <div class="tooltipContent" id="sprytooltip" spry:detailregion="eventsDS">{tooltip}</div>
      <p><a href="#top">back to top</a></p>
            <script type="text/javascript">
      var sprytooltip = new Spry.Widget.Tooltip("sprytooltip", "#tooltiptrigger");
            </script>

        • 1. Re: Adding Tooltip to Spry Data
          Ben Pleysier CommunityMVP

          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 Community Member

            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 CommunityMVP

              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 Community Member

                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 CommunityMVP

                  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 Community Member

                    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.