Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tooltips & Popups > Using & Adding Style to the New GuildPortal Tooltips
Mottie (SuperAdmin) 5/26/2009 6:08 PM EST : Using & Adding Style to the New GuildPortal Tooltips
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

Mottie (SuperAdmin) 6/5/2009 1:04 PM EST : RE: Using & Adding Style to the New GuildPortal Toolt...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Also check out the new and improved tooltip script posted here.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 9/17/2009 6:43 PM EST : RE: Using & Adding Style to the New GuildPortal Toolt...
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Hi Mottie, I'm not sure how to make this into a .js file. Did I do this correctly?

<script type="text/javascript" src="http://www.axiomfiles.com/Files/70851/style.js"></script>

<script src="http://www.axiomfiles.com/Files/70851/style.js" type="text/javascript"></script>
TopBottom

Mottie (SuperAdmin) 9/17/2009 8:25 PM EST : RE: Using & Adding Style to the New GuildPortal Toolt...
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Guppy!

Actually that's a style!...

Normally you can just add any style into your Custom Stylesheet, but because the tooltip style is added after the custom stylesheet, it would be better to add it into your banner area.

If you want to move the css styling into an external file:
  • Copy (Ctrl-C) eveything between the <style> and </style> tags
  • Open up your non-rich text editor
  • Paste (Ctrl-V) the contents into the editor
  • Save the file into something like "mycss.css" (these files usually end with a .css)
  • Upload it to your file server
  • Add the following template to you site to point to this external file:

    <link rel="stylesheet" media="screen" type="text/css" href="http://mysite.com/mycss.css" />
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 9/24/2009 1:47 AM EST : RE: Using & Adding Style to the New GuildPortal Toolt...
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Thank you Mottie clap
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%