We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] Tooltip
Topic Started: Jun 22 2011, 02:06 PM (667 Views)
newbieee
Member
[ * ]
Board Address: Private
Board Software: ZetaBoards
Description: Shows a tooltip when I move my mouse over the text

Hi guys. I'm trying to find how to add a tooltip when I move my mouse over a text, but I'm a complete newbie. First, I have the following CSS:
Code:
 
<style type="text/css">
.tooltiphover {
border-bottom: 1px dashed #fff;
text-decoration: none;
cursor: help;
color: orange;
}

.tooltiphover:hover {
position: relative;
border-bottom: 1px dashed #fff;
}

.tooltiphover span {
display: none;
}
.tooltiphover:hover span {
display: block;
position: absolute;left:0px;top:10px;
background: black;
border: 1px dotted white;
padding: 5px; margin: 10px;
opacity:0.9;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
font-size: small;
color: white;
background: #111;
width: 400px;
float: left;
}
</style>


This code works fine in HTML, which is something like this:
Code: HTML
 
Armor Class: <a href="" class="tooltiphover">15<span>Explanation of the number 15</span></a>


Can someone explain how I can make a BBCode that does the code below?
Armor Class: [mouseover=15]Explanation of the number 15[/mouseover]

Where "15" is the text and "Explanation of the number 15" is the tooltip.
Edited by newbieee, Jun 22 2011, 02:08 PM.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
not a fan of the "title" attribute? try this:
Code: Below the Board
 
<script type='text/javascript'>
$('.c_post').each(function(){
$(this).html($(this).html().replace(/\[abbr=(.+?)\](.+?)\[\/abbr\]/gi, "<a href='#' class='tooltiphover'>$1<span>$2</span></a>"));
});
</script>
Offline Profile Goto Top
 
newbieee
Member
[ * ]
Quozzo,
Can you change the .JS code so it can work like this:
Quote:
 
[mouseover=blablabla]blebleble[/mouseover]

where blablabla = $1
and blebleble = $2?
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
Code:
 
<script type='text/javascript'>
$('.c_post').each(function(){
$(this).html($(this).html().replace(/\[abbr=(.+?)\](.+?)\[\/abbr\]/gi, "<a href='#' class='tooltiphover'>$2<span>$1</span></a>"));
});
</script>

do you want it to work for [mouseover] or the universally known [abbr] tag?
Offline Profile Goto Top
 
newbieee
Member
[ * ]
Quote:
 
do you want it to work for [mouseover] or the universally known [abbr] tag?

I didn't know that the abbr tag existed... Also, I didn't understand what it did in the code. Now I can manually change if necessary. Thanks so much for the help. It worked perfectly.

Also, thanks for your Tabs script. It's great.
Edited by newbieee, Jun 22 2011, 04:45 PM.
Offline Profile Goto Top
 
Roby-ZNR
Member Avatar
Efficacy
[ *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Create your own social network with a free forum.
Learn More · Sign-up for Free
« Previous Topic · Closed Requests · Next Topic »
Locked Topic