[TIP] How to use TipTip(ToolTip) jQuery plugin on your network to enhance user experience.

[Elson Tan]

Hi,
I have not written a tip for a while , so in this tip , I will be showing you how to use TipTip(tooltip) jQuery plugin on your network by using Ning network's own jQuery library (x$).

What's TipTip?
TipTip is a custom tooltip which can detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin.
It uses ZERO images and is completely customizable via CSS. It's also only 3.5kb minified!

Please visit the developer site for more info:
http://code.drewwilson.com/entry/tiptip-jquery-plugin/

Why TipTip?
I personally like this plugin , there are alot of custom tooltip plugins on the web but this is simple , light weight , advanced , it just meet all the requirements for a pretty sleek feature.

Let's get it started

1. I have made TipTip source javascript file compatible with Ning jQuery library.
Now add this script into your network (My network > Custom Code):

Normal File:

<script type="text/javascript" src="http://elsodev.com/projects/tiptip4ning/script.js"></script>

-OR-

Minified Version:

<script type="text/javascript" src="http://elsodev.com/projects/tiptip4ning/min-script.js"></script>

2. Now the CSS (as described in the developer site , it does not use any images , so its pretty light weight!) , add it to your Design Studio > Advanced or Appearance > Advanced:

/* TipTip CSS - Version 1.2 */

#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}

#tiptip_holder.tip_top {
padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
padding-top: 5px;
}

#tiptip_holder.tip_right {
padding-left: 5px;
}

#tiptip_holder.tip_left {
padding-right: 5px;
}

#tiptip_content {
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}

#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#tiptip_content {
padding: 4px 8px 5px 8px;
background-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
border-bottom-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
border-top-color: rgba(20,20,20,0.92);
}
}

3. Now you have done setting it up!

Let's start using it now.

To add the tooltip to members module use this:

<script type="text/javascript">
x$(document).ready(function(){
x$(".module_members .xg_avatar a.fn").tipTip();
});
</script>
! Put it under your TipTIp script that we added in step 1

As you can see , it just add the element id/class and initiate TipTip on it using .tipTip();

x$("element id/class just like in css").tipTip();

TipTip gets the tooltip value from your element title attribute.

Full Description Here & Tutorial:
http://code.drewwilson.com/entry/tiptip-jquery-plugin/

That's it. Just remember to add an x before $ in the script.

[Dr Husky (Emalejandro)]

+1

Is a great tip tip :D

[JFarrow]

awesome..i'll give this a whirl!  thanks

[Armani Rouse]

lol reminds me of Kevin in Home Alone 1! "are those chesse dinners on sale? I'll give em a whirl!" hahahahahaha it is a great tip though, I implemented it on my network last night, works great!

[Glenn Lynch]

Great ELSON!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[Glenn Lynch]

Hi Elson
For some reason Its not working. Plz help me!

[Elson Tan]

whats the problem? did you follow the instructions above closely?

[Glenn Lynch]

Yep

[Glenn Lynch]

Got it working! Thanks Elson!

[Armani Rouse]

Hey Elson, great tip by the way! Is it only supposed to show up while your on the home page of your networks or any page you can view the members module from? For some reason it only shows up only on the home page but when I view members from my profile page it doesnt show, is it coded that way?

[solo]

is there anyway we can add more links in the tiptip..this is nice 

[Elson Tan]

add more links? you meant something like this?

html:

<a id="link1" href="http://google.com" title="Open Google"></a>

script:

<script type="text/javascript">
x$(document).ready(function(){
x$("#link1").tipTip();
});
</script>

[Hugh]

This looks really interesting and have followed your instructions. But, I'm something of a novice. My understanding is that this just sets up the framework and to get tips working as a the top of Drew Wilson's page, I need to add code to generate each tip. Is that right? Can anyone point me to a resource on how to do that, please? I don't understand Drew Wilson's 'How to'.