Coding-Spot

You are not connected. Please login or register

 
 
 

Tooltip on your forum

Message (Page 1 of 1)

avatar
 
Administrator
Administrator

Posted on April 15th 2013, 12:45 am

 
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 April 21st 2013, 5:51 pm; edited 3 times in total



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


avatar
 
Advance Member

Posted on April 21st 2013, 12:06 pm

 
#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 April 21st 2013, 8:31 pm; edited 1 time in total



View user profile


avatar
 
Administrator
Administrator

Posted on April 21st 2013, 2:30 pm

 
@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


avatar
 
Advance Member

Posted on April 21st 2013, 8: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


avatar
 
Administrator
Administrator

Posted on April 21st 2013, 8: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


avatar
 
Advance Member

Posted on April 21st 2013, 8:46 pm

 
ok i think i got :D: thanks



View user profile


avatar
 
Advance Member

Posted on April 22nd 2013, 12:27 am

 
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


avatar
 
Administrator
Administrator

Posted on April 22nd 2013, 12:59 am

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



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


avatar
 
Advance Member

Posted on April 22nd 2013, 9: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


avatar
 
Administrator
Administrator

Posted on April 22nd 2013, 10: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


avatar
 
Administrator
Administrator

Posted on April 23rd 2013, 8:21 pm

 
Yep. Tooltip/Tipsy.
Nice :):



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


#12

Sponsored content


 

Posted

 





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