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! > Using & Adding Style to the New GuildPortal Tooltips
Mottie (MVP) 5/26/2009 6:26 PM EST : Using & Adding Style to the New GuildPortal Tooltips
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Using & Adding Style to the New GuildPortal Tooltips

GuildPortal admin site link to original post

GuildPortal has finally replaced the old tooltip script. Aaron mentioned that it was causing problems with the shout box and some other site controls. So you can start switching over to this new one... it's actually pretty easy to use.

Adding Style

Before
After
  • Add the following CSS to make the tooltip style match your site.
<style type="text/css">
#tooltip {
 width:250px;
 background:#222222 url();
 color:#dddddd;
 border:#444444 2px solid;
 padding:5px;
}
</style>
  • Don't add this to the Custom CSS because it will get overridden unless you add a !important after each definition... it's best to add all of the above CSS to the Banner or Footer HTML (Control Panel > Custom Code > Banner HTML or Footer HTML)
  • Customizing
  • Tooltip Width: Change the tooltip width by modifying the width (in red)

    width:250px;

  • Background: Change the tooltip background color (in blue) or add a background image URL inside the parentheses.

    background:#222222 url(BACKGROUND IMAGE URL HERE) ;

  • Font Color: Change the font color (in blue)

    color:#dddddd;

  • Border: Change the border color (in blue), thickness (in red) or style (in green)

    border:#444444 2px solid;

  • Padding: Change the spacing between the border and the text (in red)

    padding:5px;
Using the Tooltip
  • Adding content to the tooltip as follows:

    1. Add a class called "tooltip" to any link to tell the script that this will have a tooltip window (in green)

    2. Add your tooltip content to the title attribute of the link (in blue)

    Example: <a class="tooltip" href="LINK URL" title="This will be inside the tooltip">Hover for Tooltip</a>

    Example in action: Hover for Tooltip

  • Quotes: Don't add any quotes inside the tooltip, if you want to add quotes, use the HTML code for it: &quot;

    Example: <a class="tooltip" href="LINK URL" title="Replace &quot;quotes&quot; like this">Hover for Tooltip</a>
     
    The tooltip content will show this: Replace "quotes" like this

  • Images: You can also add images into the tooltip, use single quotes around the image source URL.

    Example: <a class="tooltip" href="LINK URL" title="This makes me Happy! <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/emotes/tongue.gif'>">Hover for Tooltip</a>
TopBottom

Mottie (MVP) 6/5/2009 1:04 PM EST : RE: Using & Adding Style to the New GuildPortal Toolt...
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Also check out the new and improved tooltip script posted here.
TopBottom

Guppy Queen (New Admin) 6/6/2009 2:52 AM EST : RE: Using & Adding Style to the New GuildPortal Toolt...
Guppy Queen
Posts: 41034
Zomgawsh Poster

Awesome! Thank you Mottie.
TopBottom

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