Walkthrough: DVWP Tooltip

Written by: Chris Lincoln

Tooltips may be implemented to greatly improve user experience in many scenarios.  This walkthrough will provide a method with which tooltip functionality may be implemented on SharePoint Data View Web Parts (DVWPs) using XSL and JavaScript.

Preparation

1. Open the SharePoint site in SharePoint Designer 2007
2. Open the page on which the tooltip functionality will be implemented
3. Enable either Split or Code view

Create the Tooltip

1. Locate the DVWP in which the tooltip functionality will be implemented
2. Locate the XSL template “dvt_1.rowview” within the DVWP
   

   	Example
   <xsl:template name=”dvt_1.rowview”>

   This XSL template specifies what is rendered for each List Item displayed in the DVWP.  A tooltip will be rendered for eash List Item and therefore should be added to this template.

3. Locate where the tooltip should appear
   No consideration for spacing of the tooltip should be taken into account.  The tooltip will utilize the position style value “absolute” to display over other page content.
4. Insert the blank tooltip
   

   	Example
   <div style=”position:absolute;display:none;margin-top:14px;white-space: »nowrap;overflow:visible;border:silver 1px solid;background-color: »white” class=”ms-listdescription”> <xsl:attribute name=”id”>tooltip_<xsl:value-of select=”@ID”/> »</xsl:attribute> <xsl:attribute name=”onmouseenter”>javascript:this.style.display= »’none’;</xsl:attribute> </div>
   » – unintended line break

   The tooltip may be any HTML object and is not limited to the DIV object.  The tooltip HTML object must have the id attribute set as shown in the provided example.  The position and display style attributes should be set as shown in the provided example.  Setting the position style attribute to “absolute” allows the tooltip to display over other page content.  The onmouseenter attribute (as shown in the provided example) hides the tooltip if the user moves the cursor onto the tooltip.

   If multiple DVWPs on the same page will use the tooltip functionality, the id attribute of tooltips must be made distinct in each DVWP.  For example, tooltips in a DVWP on the List “Transactions” could use the id attribute convention: tooltip_transactions_[List Item ID].  Thus, tooltip id attributes that may have been “tooltip_14″ and “tooltip_14″ may now be “tooltip_transactions_14″ and “tooltip_reports_14″.

5. Set the tooltip text
   

   	Example
   <xsl:choose> <xsl:when test=”string-length(string(@Tooltip))=0″> <xsl:text>No tooltip.</xsl:text> </xsl:when> <xsl:otherwise> <xsl:value-of select=”@Tooltip” disable-output-escaping=”yes”/> </xsl:otherwise> </xsl:choose>

   If the tooltip references a List Item column that is not required (i.e. may be empty), it is suggested that empty values be handled as shown in the provided example. List columns must be referenced by their internal name. Setting the disable-output-escaping attribute to “yes” will display special (i.e. escaped) characters properly (i.e. unescaped). Please note that the provided example references a custom (i.e. non-standard) column called “Tooltip”.

The tooltip should be located like:

As a result of setting the position style attribute to “absolute”, the tooltip renders like:

Create the Tooltip Triggers

1. Locate the DVWP in which the tooltip has been created
2. Locate the XSL template “dvt_1.rowview” within the DVWP
   

   	Example
   <xsl:template name=”dvt_1.rowview”>

   This XSL template specifies what is rendered for each List Item displayed in the DVWP. Each tooltip trigger (i.e. system response to a user action) will show /hide the tooltip in the same row (i.e. TR object) as itself.  Therefore, the tooltip trigger should be located within this template.

3. Locate the HTML object that will trigger the display of tooltips in response to a specified user action.
4. Insert the tooltip triggers
   

   	Example
   <td> <xsl:attribute name=”onmouseenter”>javascript:var tooltipObj=document. »getElementById(‘tooltip_<xsl:value-of select=”@ID”/>’);tooltipObj. »style.left=event.clientX;tooltipObj.style.top=clientY;tooltipObj. »style.display=”;</xsl:attribute> <xsl:attribute name=”onmouseleave”>javascript:document.getElementById( »’tooltip_<xsl:value-of select=”@ID”/>’).style.display=’none’; »</xsl:attribute> <xsl:value-of select=”@Title”/> </td>
   » – unintended line break

   Tooltip triggers are inline JavaScript that find and display the tooltip appropriately. The tooltip is shown by setting its display style attribute to null and hidden by setting its display style attribute to “none”. The provided example shows the tooltip when the user moves the cursor onto the Title column’s parent TD and hides the tooltip when the user moves the cursor off the title column’s parent TD. Please note that the tooltip triggers are applied to the column’s parent TD to provide an optimal user experience.  The provided example displays the tooltip at the point where the user moved the cursor onto the parent TD (rather than always below the parent TD content).

Example

• Tweet
• 0
• Comment (1)