[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.

If you love this, do follow me on Twitter @elsodev for more updates from me!

I am also open for connections on Linkedin: Elson Tan

[Dr Husky (Emalejandro)]

+1

Is a great tip tip :D

[⚡JFarrow⌁]

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

[Elson Tan]

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

[Elson Tan]

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

[solo]

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

[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'.

[Elson Tan]

Hi,

You just need to find/get the element id/class , then put it into the script then tipTip(); it.

for example:

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

- see the id="link1" ?

- you need to get link1, if its an id , put a # infront of it like this : #link1

- then put it in the script like this:

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

[Elson Tan]

The script will automatically gets the "Open Google" title attribute and display it out as a tooltip.

[Hugh]

Thanks for your superfast response. I've tried the above with the following and can't get it to work:

<a id="link1" href="http://www.harringayonline.com/page/harringay-vs-haringey" title="Test" target="_blank" name="link1">Click here</a>

What am I missing?

[Elson Tan]

did you put the script in your custom code?

[Hugh]

Yes.

I also tried adding the hashtag before link1 in the html code, just in case. 

What should I be seeing from adding the code that's the main subject of this page?  Would it make any difference if I'm using an old style Ning theme?

Thanks for taking the time to answer, Elson.