Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tooltips & Popups > Using GuildPortal's tooltip and popup window
Mottie (SuperAdmin) 8/6/2008 5:26 AM EST : Using GuildPortal's tooltip and popup window
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Using GuildPortal's tooltip and popup window

GuildPortal admin site link to original post

There are two ways you can show information, both are build into GuildPortal.

Using the tooltip

Hover over this: , or this: "Blah blah blah..."

  • Add the following to make it work:

    <span class="tooltip" title="<div class=tooltipheader>HEADER</div>Blah blah blah... put info here" rel="300">
    <img src="http://admins.guildportal.com/Faces/face_grin.gif">
    </span>

    <span class="tooltip" title="<img src=http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg>" rel="80">Blah blah blah...</span>

  • The text in green is what is seen in the tooltip, you can add any HTML you want (like the <div class=tooltipheader>... </div> is what adds style to the top. I added a second example with an image, make sure you don't use quotes.

  • The number in red sets the width of your tooltip window

  • The orange text is to your emote/text... sadly, it doesn't appear that you can add emotes anywhere but in the forums.

Using the Popup window

Click on this: , or this: Blah Blah Blah
  • Add the following to make it work:

    <a href="#info1" rel="facebox"><img src="http://admins.guildportal.com/Faces/face_devil.gif"></a>
    <div style="display:none;">
    <div id="info1">
    <strong>Header</strong><br>
    Blah blah blah...
    More info about this...

    </div>
    </div>

    <a href="#info2" rel="facebox">Blah Blah Blah</a>
    <div style="display: none;">
    <div id="info2">
    <center><img src="http://i201.photobucket.com/albums/aa236/Mottie1/SMRT.jpg"></center>
    </div>
    </div>

  • Same as above, the text in green shows up in the popup window

  • The orange text is where you put your emote/text.

  • If you add more than one of these to the page, change the ID in blue... make an info2, info3... etc.

  • See this post about changing the style of the box, things inside and dimming the area outside the box
Edit (1/24/09): Added the script needed to add the tooltip script back.
Edit (1/4/11): Updated tooltip example to use the current tooltip method.
Header
Blah blah blah... More info about this...
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
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%