B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > B l o g P o i n t > Posts > JQuery - Quick Launch with Tool tips with Simple Tip plug-in
JQuery - Quick Launch with Tool tips with Simple Tip plug-in
Well, I have noticed that users do not know where to find things on SharePoint.  I have been a fan of tool tips as I believe it is a great way to help users understand what they will find behind the link.
 
WSS does not provide us the ability to add a title so that the default tool tip would show the title.  Even if it did, like MOSS allows, the standard tool tip is not very obvious or well designed. 
 
I decided to look at how we could add tool tips for WSS that gives us the flexibility in how they are shown.  Simple Tip was the best way that I could see doing this.
 
With this solution we are able to identify which links will have a tool tip, what the tool tip will say and the look of the tool tip.  As you will see in the example, http://www.bitsofsharepoint.com/ExamplePoint/SimpleTip/default.aspx that I have added tool tips to the Quick Launch to show how you can make it more intuitive for the user to find the right information.
 
Here is the code and webpart that you can add to any page.

 
Click to View Example
 

Comments

Not working for me

I have downloaded the webpart and uploaded to a zone on my page. I cannot make the defualt tool tips display or a new one I added.   I am using WSS 3.0.  I am not great with coding and more of an end-user.  What can I do to troubleshoot?  I am not getting any error messages.  i do have other code from you site working on other sites/pages.
at 10/28/2009 10:48 AM

Re: JQuery - Quick Launch with Tool tips with Simple Tip plug-in

Sorry to hear this not working for you. 

To implement this correctly you will need to download all 3 files and install the correctly.

1) WebPart - Download that then install in on the page
2) .js file - you will need to download this and then upload it to a document library.
       -) The following code in the WebPart will need to be changed to reflect where the .js file is.
       -) <SCRIPT src="http://www.bitsofsharepoint.com/Documents/jquery/jquery.simpletip-1.3.1.js" type=text/javascript></SCRIPT> 
       -) As you can see I am pointing it to where I have uploaded it on my site.
3) CSS file will need to be loaded into a CEWP.  This affects how it is displayed and this is where you can change the coloring of the popups.
4) Last the WebPart installed needs to be opened and the code needs to be changed.  Take a look at what I did for the site: http://www.bitsofsharepoint.com/ExamplePoint/SimpleTip/default.aspx

<script type="text/javascript">
$(document).ready(function(){

/*
* Add a two lines, one for Link and one for tip.
* Add a sequential number to each variable name.
* Link must be exact or it will not work.
*/

var link1 = '"/ExamplePoint/SimpleTip/Shared%20Documents/Forms/AllItems.aspx"';
var tip1 = 'Find all the team documents here: <ul><li>Excel</li> <li>Word</li> <li>powerpoint</li></ul>';
var link2 = '"/ExamplePoint/SimpleTip/Lists/Calendar/calendar.aspx"';
var tip2 = 'This calendar shows the schedule and location of important meetings.';
var link3 = '"/ExamplePoint/SimpleTip/Lists/Tasks/AllItems.aspx"';
var tip3 = 'A list of Tasks to be completed.';
var link4 = '"/ExamplePoint/SimpleTip/Lists/Team%20Discussion/AllItems.aspx"';
var tip4 = 'Follow the Team discussion on various topics.';

// Add a line for each link and tip added above

$("[href="+link1+"]").simpletip({content: tip1, offset: [50,0] });
$("[href="+link2+"]").simpletip({content: tip2, offset: [50,0] });
$("[href="+link3+"]").simpletip({content: tip3, offset: [50,0] });
$("[href="+link4+"]").simpletip({content: tip4, offset: [50,0] });

});
</script>

Notice how the link and tip are numbered in each section. Numbering is important. 
Link has to be exactly as it appears in the code of your site, so make sure that you are putting in the right link.

Hope this helps,
Peter Allen at 10/28/2009 12:45 PM

Hi, I would like to add Tooltip on existing document library

I would like to have tooltips with creating, modifying dates, comments of the document on my view of document library...
It's difficult for me to see if we can use your webpart / script / css on existing view of a document library there's no how to about it

Can you say to me if we can make this kind of solution with your plug-in (webpart, js, css) ?

Regards
at 4/22/2010 3:27 AM

Re: JQuery - Quick Launch with Tool tips with Simple Tip plug-in

Are you looking form something like this: http://www.bitsofsharepoint.com/ExamplePoint/Site/LoadTipBeyond.aspx

It is not clear to me what you want with tool tips for creating, modifying dates, comments of the document.
Peter Allen at 5/1/2010 1:36 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Addition: 2 + 1 = *


Please complete this equation.

Email


This is optional.
Attachments

 T o p i c P o i n t

 E x a m p l e P o i n t