Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > How to add a tooltip in the roster that shows your medals and description
Mottie (MVP) 1/28/2009 8:01 AM EST : How to add a tooltip in the roster that shows your me...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

How to add a tooltip that shows your medals and description

I've noticed that medals in the roster are pretty small and hard to see, especially when there are a lot of them. Then hovering over the icon to figure out what it is for can be a pain as well. Now you can add this script to get the image and information in a tooltip window



Add this code to a free form text/HTML box on your Roster page. I've included the tooltip script at the top (in orange) - if you already have it then there is no need to add it again.

Code (for LOTRO, use the code further down)

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
color:#dddddd;
background:#222222;
border: 1px solid #333333;
padding:5px;
display:none;
opacity: 0.9;
filter: alpha(opacity=90);
text-align:left;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready( function(){

var medaltooltipwidth = 150;
var medaltooltipBackground = "#000000";
var medaltooltipColor = "#ffffff";

// Don't change anything below
// ***************************
$("div[id*='_pnlStandardRoster']").find(".NormGridRow,.AltGridRow").find("img").each(function(){
var tmp1 = '<center><img src=' + $(this).attr('src') + '><br>' + $(this).attr('title') + ' ' + ($(this).attr('alt') || '') + '</center>';
var tmp2 = medaltooltipwidth + "," + medaltooltipBackground + ";color:" + medaltooltipColor + ";";
$(this).attr({'title':tmp1,'rel':tmp2}).addClass('tooltip');
})
})
</script>
LOTRO Code
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
color:#dddddd;
background:#222222;
border: 1px solid #333333;
padding:5px;
display:none;
opacity: 0.9;
filter: alpha(opacity=90);
text-align:left;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function(){

var medaltooltipwidth = 150;
var medaltooltipBackground = "#000000";
var medaltooltipColor = "#ffffff";

// Don't change anything below
// ***************************
 $("#tblLotroRoster").find(".loNam").find("img").each(function(){
  var tmp1 = '<center><img src=' + $(this).attr('src') + '><br>' + $(this).attr('title') + ' ' + ($(this).attr('alt') || '') + '</center>';
  var tmp2 = medaltooltipwidth + "," + medaltooltipBackground + ";color:" + medaltooltipColor + ";";
  $(this).attr({'title':tmp1,'rel':tmp2}).addClass('tooltip');
 })
})
</script>

Customizing

  • The following variables will only work if you use the new and improved tooltip script (in orange). If you only want to use the default tooltips, this code will still allow you to see the pop-ups.

    • Tooltip Size: Modify the tooltip width by changing the number in red.

    • Tooltip Background Color: Modify the "medaltooltipBackground" variable (in blue) to change the background color of your tooltips.

    • Tooltip Font Color: Modify the "medaltooltipColor" variable (in blue) to change the font color.

Edit (4/8/2009): Updated to fix a problem with apostrophes breaking the tooltip.
Edit (8/5/2009): Updated to work with the new tooltips.
Edit (10/11/2009): LOTRO roster is slightly different, so I added the code above.
Edit (6/21/2012): Modified code to prevent adding "undefined" at the end of the tooltip contents.
TopBottom

Mottie (MVP) 8/5/2009 11:03 PM EST : RE: How to add a tooltip in the roster that shows you...
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I've updated the original post to make the script work with the new tooltips.
TopBottom

Guppy Queen (New Admin) 8/25/2009 11:23 PM EST : RE: How to add a tooltip in the roster that shows you...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Just added this. Thanks Mottie!
TopBottom

Valdaglerion (Guild Admin) 11/25/2009 9:10 PM EST : RE: How to add a tooltip in the roster that shows you...
Valdaglerion
Posts: 2473
Zomgawsh Poster

Is there a way to use this code or something very similar on the built in Guildportal gallery page?  At the moment, hovering over a gallery image displays the title only.  It would be neat if there was a tooltip with a larger version of the image.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%