Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Roster > How to add a tooltip in the roster that shows your medals and description
Mottie (SuperAdmin) 1/28/2009 8:06 AM EST : How to add a tooltip in the roster that shows your me...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to add a tooltip that shows your medals and description

GuildPortal admin site link to original post

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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Shazmiera (Applicant) 4/9/2009 12:04 PM EST : RE: How to add a tooltip in the roster that shows you...
Shazmiera
Posts: 4595

0
Like

0
Dislike

Hi Mottie,
Where does the tool tip script go? in the freeform box?
(sorry noob here) I'm trying to get my medals to show up better.
http://finalresolve.guildportal.com
~Val
TopBottom

Manacat (Member) 8/5/2009 6:51 PM EST : RE: How to add a tooltip in the roster that shows you...

Manacat
Posts: 19

0
Like

0
Dislike

I have tryed many of these and none of them are working for me, I could be doing something wrong but I don't know. Could you pleae give step by step  on some of these.
Thank you 
Manacat

TopBottom

Mottie (SuperAdmin) 8/5/2009 9:45 PM EST : RE: How to add a tooltip in the roster that shows you...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Manacat!

I can't tell exactly whats going on with your site... so far it looks like whatever code you are putting into the footer HTML is getting cut off - it looks like the start of the calendar icon code.

I think the best thing to do would be to add code that effects every page of your site should go into the footer HTML while code that only works for specific tabs should go into a free form text/HTML type content box on that tab. What this does is makes your page load that much faster when it doesn't have to load code that isn't being used. Also, I've had trouble with putting code in the footer HTML in the past.. it used to get cut off but I'm not sure about now, that problem hasn't occurred in a long time (as far as I can tell from feedback from others).

The second thing that may be happening is that this script uses the older tooltips. I'll probably update it to work with the supported tooltips, or you could check out this post on adding my tooltip version.

Last thing, the link you provided me was to a page not open to the public, but I was able to see your Home page.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 8/5/2009 11:03 PM EST : RE: How to add a tooltip in the roster that shows you...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

I've updated the original post to make the script work with the new tooltips.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Manacat (Member) 8/6/2009 9:36 AM EST : RE: How to add a tooltip in the roster that shows you...

Manacat
Posts: 19

0
Like

0
Dislike

sorry about that and thinks just one more ??? how do I get  to the header and footer thinks you talk about not sure what they are or where.
Tahnk you 
Manacat
TopBottom

Mottie (SuperAdmin) 8/6/2009 1:02 PM EST : RE: How to add a tooltip in the roster that shows you...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Manacat!

To get to either the Banner or Footer HTML go to:
Control Panel > Custom Code > Banner HTML or Footer HTML
There is no need to switch into HTML mode for these editors... just paste in your HTML, enable and save the code.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

davpa (Applicant) 6/19/2012 11:38 AM EST : RE: How to add a tooltip in the roster that shows you...
davpa
Posts: 1980

0
Like

0
Dislike

I use this code for one of my groups that do not have a lot of medals yet.  I like the simplicity of it.  One odd thing though, in the description of all the medals it ends with "undefined".  I noticed other websites that use this code also have this issue.  Any way to get rid of that?
TopBottom

Mottie (SuperAdmin) 6/21/2012 11:40 PM EST : RE: How to add a tooltip in the roster that shows you...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Davpa!

Sorry it took me so long to reply. I've modified the code above but all that was changed was this code:
$(this).attr('alt')
was changed to this:
($(this).attr('alt') || '')


Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

davpa (Applicant) 6/22/2012 3:58 PM EST : RE: How to add a tooltip in the roster that shows you...
davpa
Posts: 1980

0
Like

0
Dislike

Huzza!  Thanks for that fix.
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%