Coding-Spot

You are not connected. Please login or register

 
 

Tooltip on your forum

Message (Page 1 of 1)


 
Administrator
Administrator

Posted on Sun Apr 14, 2013 5:45 pm

 
Today i'm going to show you on how to add a tooltip for your website.

Forum Version: PunBB and PhpBB2 only!
Demo: Hover me!

So let's start.
1. First, put this in your CSS (ACP > Display > Pictures and Colors > Colors > CSS):
Code:
.tipsy {
  padding: 5px;
  font-size: 10px;
  position: absolute;
  z-index: 999;
}
  .tipsy-inner {
  padding: 5px 8px 4px 8px;
  background-color: black;
  color: white;
  max-width: 200px;
  text-align: center;
}
  .tipsy-inner {
  border-radius: 3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
  .tipsy-arrow {
  position: absolute;
  background: url('http://i47.tinypic.com/ad2dkz.gif') no-repeat top left;
  width: 9px;
  height: 5px; }
  .tipsy-n .tipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -4px;
}
    .tipsy-nw .tipsy-arrow {
  top: 0;
  left: 10px; }
.tipsy-ne .tipsy-arrow {
  top: 0; right: 10px;
}
  .tipsy-s .tipsy-arrow {
  bottom: 0; left: 50%;
  margin-left: -4px;
  background-position: bottom left;
}
    .tipsy-sw .tipsy-arrow {
  bottom: 0;
  left: 10px;
  background-position: bottom left;
}
    .tipsy-se .tipsy-arrow {
  bottom: 0;
  right: 10px;
  background-position:
    bottom left;
}
  .tipsy-e .tipsy-arrow {
  top: 50%;
  margin-top: -4px;
  right: 0;
  width: 5px;
  height: 9px;
  background-position: top right; }
  .tipsy-w .tipsy-arrow {
  top: 50%;
  margin-top: -4px;
  left: 0;
  width: 5px;
  height: 9px;
}

2. Go to overall_header and find this:
- For PunBB:
Code:
<body>
- For PhpBB2: (Note: If you can't find the code above, try to find the same code for PunBB.)
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
- After finding it, paste this code below it:
Code:
<script type="text/javascript" src="http://static.tumblr.com/hhedat8/DWBml4z9e/tooltip.js"></script>
<script type='text/javascript'>
  $(function() {
    $('a.example-fade').tipsy({fade: true, gravity: 's'});
  });
</script>

On the code above, this very last script, as you can see the (example-fade), shows and represent as the element you're going to use and insert on the 'a' code. The (s) represents the direction of the tooltip. You can change it with the following (nw, n, ne, w, e, sw, s, se)

Note: Only one direction is allowed.

3. Now to made this code word, you're just going to add this one inside a tag:
Code:
class='example-fade' title='Hello World'

This is an example:
Code:
<a href="linkhere" class='example-fade' title='Hello!'>Welcome!</a>

Enjoy!
If there's a part you can't understand, feel free to reply below :D:.



Last edited by Mark on Sun Apr 21, 2013 10:51 am; edited 3 times in total



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Sun Apr 21, 2013 5:06 am

 
#3 needs further clarification for us dummies. :D:

1. Where exactly do i insert the code?

< a href="linkhere" class='example-fade' title='Hello!'>Welcome!< /a >

2. "linkhere" is this the link to the Forum?

3. Do i need to change text between >Welcome!< to the corresponding Forum, example: >Rules< ?

and if anything else needs chnaging please let me know. Thanks.



Last edited by BlackScorpion on Sun Apr 21, 2013 1:31 pm; edited 1 time in total



View user profile



 
Administrator
Administrator

Posted on Sun Apr 21, 2013 7:30 am

 
@BlackScorpion:

1 and 2: Correct! :3:
3: Yes, you just need to change the 'Welcome!', because that is how it will come-up when you hover on a link that has a tooltip. :):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Sun Apr 21, 2013 1:34 pm

 
Mark wrote:@BlackScorpion:

1 and 2: Correct! :3:
3: Yes, you just need to change the 'Welcome!', because that is how it will come-up when you hover on a link that has a tooltip. :):

Mark for # 1 , i know the tags are correct but where do i put them? in the message header, css? sorry i wasn't clear.



View user profile



 
Administrator
Administrator

Posted on Sun Apr 21, 2013 1:36 pm

 
This one?:
Code:
<a href="linkhere" class='example-fade' title='Hello!'>Welcome!</a>

You can put them anywhere you want, in the homepage message, etc. :):
Or if you want to put an tooltip on a link, just copy this part and paste it inside the a tag:
Code:
class='example-fade' title='Hello World'
Then write a text in between the tag.

Example:
Code:
<a href="#" class='example-fade' title='Hello World'>Text here</a>

:):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Sun Apr 21, 2013 1:46 pm

 
ok i think i got :D: thanks



View user profile



 
Advance Member

Posted on Sun Apr 21, 2013 5:27 pm

 
e mark can you post a screen of tooltip so i can see what is that..
thanks



View user profile http://blood-line.forumtl.com



 
Administrator
Administrator

Posted on Sun Apr 21, 2013 5:59 pm

 
The demo is on my post. Check it. :;):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Mon Apr 22, 2013 2:49 am

 
Mark wrote:This one?:
Code:
<a href="linkhere" class='example-fade' title='Hello!'>Welcome!</a>

You can put them anywhere you want, in the homepage message, etc. :):
Or if you want to put an tooltip on a link, just copy this part and paste it inside the a tag:
Code:
class='example-fade' title='Hello World'
Then write a text in between the tag.

Example:
Code:
<a href="#" class='example-fade' title='Hello World'>Text here</a>

:):

Yeah I thought I had it, apparently I ain't as smart as i thought i was!!?? I copied both codes over, to css and overall header. Then did the code above with the forum link and text with the forum description, i placed it into the forum message box but when i click on the folder or words nothing happens. The templates are all published. Where did you place them on your board? You can PM me if you like.



View user profile



 
Administrator
Administrator

Posted on Mon Apr 22, 2013 3:14 am

 
Aw, i forgot, the template, overall_header i provide have the same code of the tooltip but different class.

Okay, let the codes you put on the overall_header template as is. So now.
- Go to ACP > Display > Templates > General > overall_header: (Find this part and delete it)
Code:
<script type="text/javascript" src="http://static.tumblr.com/hhedat8/DWBml4z9e/tooltip.js"></script>
<script type='text/javascript'>
  $(function() {
    $('a.tooltip').tipsy({fade: true, gravity: 's'});
  });
</script>



View user profile http://coding-spot.darkbb.com



 
Administrator
Administrator

Posted on Tue Apr 23, 2013 1:21 pm

 
Yep. Tooltip/Tipsy.
Nice :):



View user profile http://coding-spot.darkbb.com


#12

Sponsored content


 

Posted Today at 11:54 am

 





Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None