0

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.

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}">

9
  • I will look at it tomorrow at work. Thank you for your answer. Jun 5 '14 at 1:12
  • Re-read what you put into your post and realized this doesn't even approach to answer my question or need. The tooltip which I'm looking at is a popup, which occurs during onmouseover and goes away with onmouseout events. You are talking about selecting items and such, which is definitely not what I'd like to be doing. I'm asking about how to integrate the code using the call to dynamically create these events within the aspx page. Jun 5 '14 at 10:56
  • @Paulster2 tooltips can be activated on hover or on click, that's your decision. This is why I used a more generic term ("select"). If you are speciically looking for a mouseover tooltip, feel free to include this information in your question. In practice this makes little difference as tooltip plugins usually address both scenarios.
    – Christophe
    Jun 5 '14 at 15:33
  • Please see the edit. If you notice, the mouseover portion was in my original question prior to edits. Jun 5 '14 at 16:15
  • 1
    Looking at your edit, and it seems that your issue is with xslt rather than jQuery. You'll need something like <span title="{@popupField}"> (sorry, not a xslt guru)
    – Christophe
    Jun 5 '14 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.