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.

Just added this. Thanks Mottie!