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

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.

Views: 2126

Reply to This

Replies to This Discussion

+1

Is a great tip tip :D

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

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!

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

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

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

Yep

Got it working! Thanks Elson!

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?

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

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>

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

RSS

Latest Activity

Jean-Christophe Fa(u)dot commented on kid k's group 'Ning French Networks'
"En ce qui me concerne, c'est à peine si je sais que Ning 3 existe ou va exister !…"
31 minutes ago
SM replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"Hi Suzie, here is the code you need to put into your bottom custom code box in the design center…"
1 hour ago
Kos replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"ahhh now that makes sense.  Thanks for clarifying :)"
2 hours ago
Strumelia replied to FedMedic's discussion '3.0 Why is all my text centered?'
"Thanks so much, and please DO let me know what their support team is like, when you first make use…"
3 hours ago
SM replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"Hi Suzie, I'll try to post something more logical with screen shots. But, you'll see -…"
3 hours ago
SM replied to SM's discussion 'How to Target the First Page of your Site with CSS'
"Hi Kos, the reason for the code is to have elements only display on the home page. By default, Ning…"
3 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing the Spam Folder'
"it seems a few of us have the same concerns/questions i can see a reason for secrecy as in you…"
3 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing the Spam Folder'
"this is wonderful news but can u define "content" does it include comments on…"
3 hours ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service