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
Mottie (MVP) 12/27/2011 10:29 AM EST : Menu Tooltips
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Menu Tooltips

This script adds tooltip message to your Dynamic Images type navigation menu (Control Panel > Navigation Style > Dynamic Images)



Code

Add the following code to you custom code area (Control Panel > Custom HTML & Script > Custom Javascript/jQuery > Document Ready Event tab)
/*
* Add Tooltips to the Dynamic Images type menu
* The tab name (caps matter) goes on the left and the tooltip message
  goes on the right (HTML allowed; use single quotes if needed).
 
  ,"Tab Name" : "<span style='color:blue'>Tooltip
</span> to add"

* This script requires the modified tooltip mod.
*/

var tooltips = {
     "Home"     : "Go to the Home Page"
    ,"Forums"   : "Read the Forums"
    ,"Calendar" : "Check the Raid Schedule"
    ,"Mail"     : "You've got mail!"
    ,"Roster"   : "" // blank tooltips or unlisted tabs will not get a tooltip
}

// Don't change anything below
// ***************************

, t, tt, m = $('.straightBarWrapper');
if (m.length) {
    m.find('td,li').each(function(){
        t = $(this);
        tt = tooltips[$.trim(t.find('a').text())];
        if (tt) {
            t.addClass('tooltip').attr('title', tt);
        }
    });
}
Customizing

Add the tabs you would like to have a tooltip using this format - note that the first listing does not start with a comma. Tab name is in blue and the tooltip
,"Tab Name" : "<span style='color:blue'>Tooltip</span> to add"
  • Add the "Tab Name" in blue, in quotes on the left. Capitalization and spacing matters.
  • Add the tooltip HTML on the left (in purple). Use single quotes inside the quotes, as needed.
  • Unlisted tabs will not get a tooltip
  • Any tooltip HTML that is empty will not add a tooltip.
Edit (12/31/2011): Modified to add tooltips to the menu made by the Multilevel Dynamic Menu mod.
TopBottom

Valdaglerion (Guild Admin) 12/28/2011 12:37 AM EST : RE: Menu Tooltips
Valdaglerion
Posts: 2473
Zomgawsh Poster

This works great, Mottie.  One question, why do some tooltips take one line and others 2 lines?  All the tooltip popups don't seem to be of the same width.
TopBottom

Mottie (MVP) 12/28/2011 9:28 AM EST : RE: Menu Tooltips
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

By default, the tooltips don't have a set width. So if you want all of the tooltips to be the same then add a width to the Modified tooltips mod, or min and max width as I did in the example below:

<style type="text/css">
#tooltip, #tooltip2, #preview, #screenshot {

/*************************
 Modify the tooltip colors here
 *************************/
  color: #dddddd;
  background: #222222;
  border: 1px solid #333333;
  min-width: 300px;
  max-width: 500px;
TopBottom

Valdaglerion (Guild Admin) 12/28/2011 2:55 PM EST : RE: Menu Tooltips
Valdaglerion
Posts: 2473
Zomgawsh Poster

Actually, I like them shrinking or expanding as needed.  What IU don't understand is why some of them seem to do that and others don't.  One of our tooltips is "Bank, Crafters, Crafting order Form & Requests For Help".  That's fairly long but the tooltip expands and it is shown all on one line.

Another tooltip, "You've Got Mail", is much shorter, yet the script splits THAT into two lines.  If the tooltips expand as needed, why is that one not showing all on one line?

Thanks!
TopBottom

Mottie (MVP) 12/28/2011 5:48 PM EST : RE: Menu Tooltips
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Weird, they are all on one line for me... is it a specific browser? Because I just checked Firefox and Chrome and they both do one line.
TopBottom

Valdaglerion (Guild Admin) 12/28/2011 10:35 PM EST : RE: Menu Tooltips
Valdaglerion
Posts: 2473
Zomgawsh Poster

That is strange.  I'm using Firefox 9.0.1 and most of the tooltips appear on one line.  The exceptions are:

Read the
Forums

You've Got
Mail

Standings & Recent
Loot
TopBottom

nkitch77 (New Admin) 12/30/2011 9:44 AM EST : RE: Menu Tooltips
nkitch77
Posts: 143
Posts With Wolves

Hi, looks great

Will this work with custom images ?
TopBottom

Mottie (MVP) 12/30/2011 10:21 AM EST : RE: Menu Tooltips
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Val! I realized I was still using an older version of Firefox, but even after updating the tooltips don't wrap. I looked through the obvious places for css that might limit the tooltip width (like max-width) but didn't find any. It is odd indeed.

Nkitch77, yes you can put html inside of the tooltip to include images/icons or whatever.
TopBottom

Valdaglerion (Guild Admin) 12/30/2011 6:49 PM EST : RE: Menu Tooltips
Valdaglerion
Posts: 2473
Zomgawsh Poster

I tested this on my laptop, too, and found that some of the tooltips were still on two lines but not the same ones.  Could this have something to do with screen resolution?
TopBottom

Gekko (New Admin) 12/30/2011 8:57 PM EST : RE: Menu Tooltips
Gekko
Posts: 841
Zomgawsh Poster

Does this work with the the new Dynamic Drop Down Menus you made?  I added it to my site but I dont see any tooltips.  That of course could simply be SSO (system smarter than operator).

Gekko
leliondormant.net


TopBottom

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