1 Reply Latest reply: Jun 11, 2008 12:00 PM by larksys RSS

    tooltip with dynamic data from cfm

    larksys
      I'm having a hard time finding an example of creating a spry tooltip from dynamic data using a cfc or url. I need to create xml data from an SQL query and populate the tooltip.

      <td style="width:100" id="#trigger" <cfif #QSpecInfoIndiv.Unknown_Status#> bgcolor="##FFFF33" </cfif>>
      <a href="../individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
      <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
      <font color="crimson">Off Limits</font>
      </cfif>
      <div id="container" class="tooltipContent">This is the tooltip content</div>
      <script type="text/javascript">
      var tooltip_one = new Spry.Widget.Tooltip("container", "#trigger", {closeOnTooltipLeave:true});
      </script>
      </td>
        • 1. Re: tooltip with dynamic data from cfm
          larksys Community Member
          The following is not working;

          <script type="text/javascript">
          <!--
          var ds1 = new Spry.Data.XMLDataSet("DspToolTips.cfm?indivnumb=#QSpecInfoIndiv.id#", "Individual/Phone");
          //-->
          </script>


          <div spry:region="ds1" id="mainRegion">
          <tr align="center" spry:repeat="ds1" onmouseover="ds1.setCurrentRow('{ds_RowID}');" class="trigger" >

          <td style="width:100" <cfif #QSpecInfoIndiv.Unknown_Status#> bgcolor="##FFFF33" </cfif>><a href="../individuals/index.cfm?fa=viewindiv&indivnum=#QSpecInfoIndiv.id#" target="_blank">#QSpecInfoIndiv.FirstName# #QSpecInfoIndiv.LastName#</a>
          <cfif #QSpecInfoIndiv.Off_Limits_Flag#>
          <font color="crimson">Off Limits</font>
          </cfif>
          </td>
          </tr>
          </div>
          <p spry:detailregion="ds1" id="tooltip">Phone:{phone}<br /></p>
          <script type="text/javascript">
          Spry.Data.Region.addObserver('mainRegion',{onPostUpdate:function(){var tt1 = new Spry.Widget.Tooltip('tooltip','.trigger');}});
          </script>


          dspToolTips.cfm;
          <cfset attributes.suppresslayout2 = "true">
          <cfset queryEnd="">

          <cfquery name="QgetTipData" datasource="#request.dsn#">
          SELECT Home_Phone
          FROM users_info
          WHERE id = #val(indivnumb)#
          </cfquery>
          <cfoutput>
          <Individual>
          <Phone>#Home_Phone#</Phone>
          </Indivdual>
          </cfoutput>