Better Tooltip - Text Enhancement [BBCode]

[Cloud_Strife]

This BBCode allows you to put some extra text in a popup window.

Installation:

Step 1: Upload "tTip" folder to your forums root.

Step 2: In vBulletin Control Panel: Custom BB Codes -> Add New BB Code

Title: Better Tooltip
BB Code Tag Name: tTip
Replacement: <a class="tTip" title="{option}">{param}</a>
Example: Good Morning!
Description: This BBCode allows you to put some extra text in a popup window.
Use {option}: Yes
Button Image (Optional): tTip/theme/images/ttip.png

Step 3: Open header template.

Find:
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">

Add before:
<link href="tTip/theme/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="tTip/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="tTip/js/jquery.betterTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tTip').betterTooltip({speed: 150, delay: 300});
});
</script>Screenshots: Attached.

[sulasno]

tagged and thanks

[Greight]

When I add the code to header, the whole forum font gets "bold". Please fix it.

[Cloud_Strife]

When I add the code to header, the whole forum font gets "bold". Please fix it.Any screenshot to help you?

[netspy]

Does not work! You style.css has many effects to the default style and kills the layout, e.g.:

#content {
width: 270px;
padding: 15px 25px;
?

Why do you change basic styles like the body element or the wrapper and content IDs?

[netspy]

Now I have removed all unnecessary style declarations and reduced to this code:

.tTip {cursor: pointer; color: #666; font-weight: bold;}
.tip {color: #333;}
/*-----------------------------------------------------------------------------------------------*/
/* TOOLTIP STYLES */
/*-----------------------------------------------------------------------------------------------*/

.tip {
width: 212px;
padding-top: 37px;
overflow: hidden;
display: none;
position: absolute;
z-index: 500;
background: transparent url(images/tipTop.png) no-repeat top;}

.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottom; height: 32px;}

Now it works.

[GamerPerfection]

Tagged.... Can you place images and hyperlinks in the popup too?

[GamerPerfection]

Ok I tested it, and firstly I had to do what netspy did to fix the layout issue.

Secondly, I tested hyperlinks and images with the thing and it doesn't work with those. I didn't realise that you can't move the cursor over the bubble when it appears as because when you move the cursor away the bubble disappears.

It would be great if you could move the cursor over the bubble and have the ability to have hyperlinks and images in the bubble so that i could click on something in the bubble.

[Dr.osamA]

thank you man

installed ander test

brb

[OldSchoolDSL]

Does not work on 4.1 PL2

Only ended up showing code in my head, above my logo.

[Fabilous]

.tTip {cursor: pointer; color: #666; font-weight: bold;}
.tip {color: #333;}
/*-----------------------------------------------------------------------------------------------*/
/* TOOLTIP STYLES */
/*-----------------------------------------------------------------------------------------------*/

.tip {
width: 212px;
padding-top: 37px;
overflow: hidden;
display: none;
position: absolute;
z-index: 500;
background: transparent url(images/tipTop.png) no-repeat top;}

.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottom; height:

Thanks. Works fine is 4.1.10