PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

How to add a JS ToolTip into a custom Webpart?

Posted by PANVEGA on May 16, 2008

Sometimes it is very useful, for instance you wanna show for a download document library a small popup window with a preview Image of the first page. This can be a simple JS mouse over event.

With Javascript generated tooltips we can include anything that we can code using HTML including graphics and even code generated from other Javascripts. This will make our tooltips much more flexible in what they can display and hopefully much more useful to your visitors. The only thing that you do need to keep in mind is that your visitor will be unable to interact with the tooltip content using their mouse since as soon as they move their mouse from over the link to which the tooltip is attached, the tooltip will disappear.

DHTML Tooltips are easy to use cross-browser JavaScript Library that creates tooltips with information popup boxes. This Tooltip DHTML Library is even capable of dynamically converting arbitrary HTML elements to tooltips, which means you can put really important stuff into tooltips, since HTML content is relevant to web search engines.

This Tooltip JavaScript works in allmost all browsers, except of ancient browsers which nobody is using anymore (Netscape 4, Opera 5/6). Supported browsers: Gecko Browsers (Firefox, Mozilla, Netscape 6+, Galeon and others), IE 5+, Opera 7+, Konqueror, Safari.

In my previous post I explained how to create a CustomQuery Webpart using the ItemStyle.xsl. You can add your JS function to every appopriate code you want e.g. a DATAVIEW Webpart with the SP Designer.

However first you have to add the JavaScript reference to your Sharepoint Page or MasterPage.

e.g.

<script type=”text/javascript” language=”javascript” src=”/Style Library/XSL Style Sheets/JS/wz_tooltip.js”></script>

Here is an example how to use the ToolTop function in a webpart template in the XSLT itemstyles.xsl:

<div id=”linkitem” class=”item link-item”>
<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>
<a href=”{$SafeLinkUrl}” target=”_blank”
title=”{@Title}” onmouseover=”Tip(‘{@Preview}’)” onmouseout=”UnTip()”>
<xsl:value-of select=”@Title”/>
</a>

<br/>
</div>

Explanation:

Each of the html tags to display a tooltip requires an onmouseover and an onmouseout attribute. No title attributes, no container DIV.

As you can see, the text to be displayed must be enclosed with single quotes, and be passed to a function Tip().

Attention: Single quotes (apostrophes) inside the tooltip text each must be masked with a backslash. Example:
Tip('This text won\'t trigger a JavaScript error.');

The call of UnTip() in the onmouseout eventhandler is to hide the tooltip again.  Of course you may also use different eventhandlers for Tip() and/or UnTip().

Dynamic Variables:

The variable “@Preview” is only an URL field or can be a standard Text field with the link to an image in a document or image library. $SafeLinkUrl is the link to the document and @Title the mandatory filed in the library which is here the name of the document file. You can add so many fields you want to the custom template transformation sheet.

Instead of a string enclosed with single quotes, Tip() accepts as well a variable or a call to a function defined elsewhere, for instance in a <script> block or in a separate JS file. The same is true for commands passed to Tip() or TagToTip(). Thus, each time a tooltip is about to be displayed, its content and formatting could be established dynamically.

Static Values:

For images inside the tooltip, the width and height attributes in the <img> tags must be specified. This enables the script to determine the tooltip size correctly.

Note:

If you chosse an Image upload field in Sharepoint you have to keep in mind to manually add the width and height to the uploaded image. Otherwise the library can not automatically show the tooltip image the first loading time you go over the link.

Doublequotes within the tooltip text must be written as HTML character entity (&quot;), since doublequotes serve already as delimiters for the onmouseover eventhandler, and cannot be nested. Apostrophes (singlequotes) must be masked with a preceding backslash, since apostophes serve already as delimiters for the tooltip text.

As delimiters for HTML tag attributes inside the tooltip text, you can use either &quot; or \’ . Example: Correct:
<a href="index.htm" onmouseover="Tip('Text with <img src=\'pics/image.jpg\' width=\'60\'>image.')" onmouseout="UnTip()"> Homepage </a>
or
<a href="index.htm" onmouseover="Tip('Text with <img src=&quot;pics/image.jpg&quot; width=&quot;60&quot;>image.')" onmouseout="UnTip()"> Homepage </a>

Wrong:
<a href="index.htm" onmouseover="Tip('Text with <img src="pics/image.jpg" width="60">image.')" onmouseout="UnTip()"> Homepage </a>

ToolTip Libraries:

http://www.walterzorn.de/tooltip/tooltip.htm

Download Tooltip Library

References:

http://www.drweb.de/weblog/weblog/?p=847

http://javascript.about.com/library/bltip1.htm

Advertisements

4 Responses to “How to add a JS ToolTip into a custom Webpart?”

  1. Dk said

    i have done something similar as the script given but when hovering over the mouse nothing happens. i ma using livelink which is a bit similar to sharepoint

    >>here i added a script

    wz_tooltip.js

    // comment needed so the closing tag doesn’t disappear

    >> here i am using my mouseover attribute

  2. Anton said

    Look also at cool script allowing to add tooltips for the part of the image – see demo at http://www.taggify.net/demo.aspx

  3. Rachael said

    Can this be used to link tooltips to specific content in a document library? I would like to be able to hover over a title and display a tooltip that relates to content in a document libary webpart (tooltip content to be avaialble in a hidden column). Is this possible?

  4. PANVEGA said

    I think one approach is to customize is:

    1. Placed a copy of …\12\TEMPLATE\SiteTemplates\MPS\LISTS\AGENDA\NewForm.aspx alongside my custom list’s schema.xml.
    2. Updated the schema.xml to show the following for the new item form:
    Code Snippet – schema.xml
    …..
    3. Updated the feature.xml element manifest to show the following:
    Code Snippet – feature.xml

    4. Added the configurable javascript from http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx inside “PlaceHolderMain”.

    Another approach could be:
    https://panvega.wordpress.com/2009/01/09/javascript-set-the-setattibute-dynamically-for-sharepoint-sites

    https://panvega.wordpress.com/2008/10/14/adding-more-funtionaltity-to-sharepoint-with-js-funtions

    More stuff:
    http://edinkapic.blogspot.com/2007/10/add-javascript-date-validation-into.html

    Good Luck!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: