Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • +1

    Is a great tip tip :D

  • NC for Hire

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

  • This reply was deleted.
    • NC for Hire

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

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

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

    • NC for Hire

      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>

      • NC for Hire

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

        • 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?

          • NC for Hire

            did you put the script in your custom code?

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

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Alex - Rosas † Negras replied to Suave's discussion
I AM LOOKING FOR DEVELOPER ASSISTANCE WITH ADDING AUTOMATIC MUSIC TO MY HOME PAGE
"if you need I'm here, if you look in my discussions you will also find the playstil"
7 hours ago
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Bizz ⚡JFarrow⌁ 
I'm sorry that many like us have worked so hard and given up, but at least I'm…"
7 hours ago
⚡JFarrow⌁ posted a discussion
Back in the day, this community was jumping with activity.   But since the Ukraine war broke out we…
15 hours ago
⚡JFarrow⌁ and Truebook are now friends
16 hours ago
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I want to thank JOHN BIZLEY ( BIZZ) for his invaluable help, active icons on the Ning bar,CODES ADDED
"A thousand thanks"
Tuesday
Alex - Rosas † Negras replied to Pam Givens's discussion
Landing Page
"Pam Givens this is an example i created of an old 3.0 site"
Tuesday
Alex - Rosas † Negras replied to Pam Givens's discussion
Landing Page
""
Tuesday
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
Sorry for my absence
"Pam Givens hi my friend, yes everything is ok a big hug"
Monday
Alex - Rosas † Negras replied to ⚡JFarrow⌁'s discussion
Ning Creators Sound Off: Share Your Network
"⚡JFarrow⌁  hi my bro! the situation is sad, Biz and all the programmers are missing, once we all…"
Monday
Alex - Rosas † Negras and Truebook are now friends
Monday
Melissa V updated their profile
May 7
conversor de letras updated their profile
May 7
More…

Meanwhile, you can check our social media channels