Posted 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):
2. Go to overall_header and find this:
- For PunBB:
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:
This is an example:
Enjoy!
If there's a part you can't understand, feel free to reply below :D:.
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>
- Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
- 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
