Displaying Field Contents in JQuery UI Tooltip

Question

In SPD 2010 I have created an aspx page, in which I have inserted an Empty Data View. I then selected the list, and then fields which are shown on the page. I want to incorporate a "tooltip" popup which will display associated information, which is also stored in the list item. I have found the jQuery UI Tooltip which looks promising. I also found a plethora of plug-ins for jQuery which basically do the same thing but look different. My problem is, I don't know how to integrate these (or if they will even work in this manner) so they will display the tooltip through the aspx page. How do I do it? I believe they are setup so you create your js page and attach it through a CEWP to affect the view of the list which you have established on your page.

Is there an easy way to do this? If so, please show the code (and treat me like a dullard). The setup I was thinking of was creating an OO function which can pull the @listfield from the list and show it as the popup. I'm sure there will be some css code with an onmouseover and onmouseout code, but I just really don't know how to incorporate it into the aspx page to pull out the information.

As an aside, I am not married to the jQuery Tooltip solution. If someone has a better way of doing this, or an easier way, I'm all over it.

EDIT: I think I need to add to or reword my question, as I'm looking for dynamic content in the popup, which is pulled from the same list as the display info. I am able to get the tooltip to work, without too much issue. It gives me the generic input which I hard code into the page. What I need help with is the integration of the code. I am using the following to get the qtip to work:

<script type="text/javascript">
    $(document).ready(function() { 
        $("[title]").each(function()
        {
            $(this).qtip();
        });
    });
</script>

and to get it displayed as the popup:

<xsl:choose>
     <xsl:when test="@field='1','True','','i')=0">Yes</xsl:when>
     <xsl:otherwise><span title="Hey, this is a try.">No</span></xsl:otherwise>
</xsl:choose>

Mind you, the code in the "test" portion is a lot more elaborate on my page for reasons, so don't worry about any syntax errors in there, I just sort of threw something together. So, further question is, How do I exchange the "title" portion of the display in my above code to include dynamic data in the popup? Assume my second field from the list is @secondfield.

Answer 1

This is a broad question and there are multiple ways to approach it.

First, you need to decide where to get the "associated information". If it's just a couple fields, you could consider loading it within the data view. If it is a bigger chunk (e.g. includes images), then you'll load it on demand with an AJAX call when the user selects an item.

[Edit] Based on your sample code, you chose the first option - load the tooltip data in the title attribute. With a slight change, you should be able to make the title attribute dynamic, something like this:

<span title="{@popupField}">