New and Improved Tooltips

GuildPortal admin site link to original post

Old Tooltips (DTT): Well the original tooltips (dtips.js) were removed from GuildPortal because it was interfering with the shout box. Now it seems that the edit buttons on some sites are not working due to this script as well. I've been telling people to add the script back without knowing the reason for the removal. LOL I think it was because I removed the shout box from my help site a long time ago (recently added back) and I personally have never had problems with the edit buttons. Either way, there is a new tooltip script...

New jQuery Tooltips (JTT): The new tooltips that Guildportal switched to is actually very nice and easy to use, but it does have some flaws. The edit buttons on the right side go off the screen and if you are hover over a tooltip while the page is loading, it'll end up as "undefined" - I still haven't figured out how to solve this problem.

Tooltips v.2: Well I had to fix the flaws of the new tooltips and I think I finally worked out all the problems with the script. And I made some improvements!

• Version 2 tooltips now behave like the original tooltips (DDT).
  
  
  • They will stay within the browser window at all times.
  • You can assign a width to each individual tooltip.
  • You can assign a background and text color to each individual tooltip.
    
    
• Version 2 tooltips will work with the original tooltip coding.
• The new jQuery tooltips (JTT) actually included image and site preview tooltips. These are now also part of the version 2 script ... I'll go over how to use these later in the post.
• The version 2 tooltips can now have a specific CSS style assigned to them, both in the CSS and for each individual tooltip.
• You can make the version 2 tooltips display content from a separate location on the page.

Adding the Tooltips

---

---

Or, add the following into your Footer HTML (Control Panel > Custom Code > Footer HTML). It is important to add the CSS into the footer because if you add it into your Custom CSS, it will get overridden by the default style set by GuildPortal.

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview, #screenshot  {
 color: #dddddd;
 background: #222222;
 border: 1px solid #333333;
 padding: 5px;
 border-radius: 1em;             /* rounded corners CSS3 */
 -moz-border-radius: 1em;    /* rounded corners Firefox */
 -webkit-border-radius: 1em; /* rounded corners webkit (Safari & Chrome) */
 opacity: 0.9;                        /* 90% opacity background */
 filter: alpha(opacity=90);       /* 90% opacity background IE only */
 text-align: left;
 display: none;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>

Using the Tooltips

• Basic Tooltip
  
  

  Link (a)	<a class="tooltip" href="#" title="Tooltip (a) Content" rel="100">Link (a)</a>
  Link (div)	<div class="tooltip" title="Tooltip (div) Content" rel="150,#9bff8f;color:#333333;">Link (div)</div>
  	<img class="tooltip" src="IMG URL" title="Tooltip (img) Content" rel="200,#808080;color:black;">
  Link (span)	<span class="tooltip" title="Tooltip (span) Content" rel="250,#008080;color:#dddddd;">Link (span)</span>

  
  
  • class="tooltip" (required) - This class activates the tooltip
  • title="TOOLTIP CONTENT" (required) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML or a pointer to content to display in the tooltip (discussed in the advanced tooltips section). Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.
  • rel="100,#222222;color:#dddddd" (optional) - the rel attribute contains the tooltip width & CSS
    
    
    • The width of the tooltip must be at the beginning of the rel attribute (in red). Do not include the "px" at the end, it is added by the script.
    • The tooltip CSS follows the width and is separated by a comma. The first hex code "#222222" is for the background color of the tooltip. You can add any additional CSS (in standard CSS format) separated by a semi-colon.


• Preview Tooltips
  
  

  <a class="preview" href="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/Help-Site.png" title="<center>Help Site</center>"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif"></a>

  
  
  • class="preview" (required) - This class activates the tooltip which puts the linked image (from the href) into a tooltip. The tooltip size is adjusted automatically to fit the image.
  • href="URL" (required) - URL to the image, for previewing in the tooltip and the URL you go to when you click on the image.
  • title="TOOLTIP CONTENT" (optional) - This content becomes the image caption located below the image inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.
  • <img src="URL_THUMBNAIL"> (required) - This will be the thumbnail of the URL image (in orange), or you can pick any image as I did here. Or you can replace the <img> with text.
  
  
• Screenshot Tooltips



LMYC	<a class="screenshot" href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" title="<center>Loch Modan Yacht Club</center>" rel="http://www.axiomfiles.com/Images/Spotlight/194525.jpg">LMYC</a>
Google	<a class="screenshot" href="http://www.google.com" title="<center>Google</center>" rel="#">Google</a>



• class="screenshot" (required) - This class activates the tooltip that gets the site screenshot image from the rel attribute (in light blue)
• href="URL" (required) - URL to your desired website
• title="TOOLTIP CONTENT" (optional) - This content becomes the screenshot (image) caption inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.
• rel="URL_SCREENSHOT" or rel="#" (required)
  
  
  • This contains the URL to the screenshot image of the site to which you have the link pointing. Yes, you do have to take, resize and upload the screenshot image yourself.
    
    *UPDATED*
  
  
  • You can now use rel="#" to obtain a website thumbnail preview from websnapr.com
  
  
• text or image (required) - Text or image that becomes the clickable link to the site.


• Advanced Tooltips
  
  

  This Tooltip is from a <div> that is inside a link Hover me	<a class="tooltip" rel="300" title="###tt1" href="#"><div id="tt1" style="display:none">This Tooltip is from a <div> that is inside a link</div>Hover me</a>
  Hover me This tooltip is from a <div> that can be put anywhere on the page	<div class="tooltip" rel="300" title="###tt2">Hover me</div> <div id="tt2" style="display:none">This tooltip is from a <div> that can be put anywhere on the page</div>

  
  
  • class="tooltip" (required) - This activates the tooltip
  • rel="300" (optional) - sets the tooltip width. You can also add CSS as described in the basic tooltip section
  • title="###tt1" (required) - The title is broken up into two parts: the tooltip object flag and the id of the object whose contents will be shown in the tooltip.
    
    
    • The "###" is the tooltipObjFlag. In the script is set to a default value of "###". So the script will look for this specific pattern in the title. If it finds this pattern, it will then load the tooltip content from the ID that follows the flag.
    • The "tt1" is ID of the object (a <div> in the example above) that contains the tooltip contents. Each tooltip you add in this way should have a unique ID. So the next tooltip should be "tt2", etc...
    • So "###tt1" tells the script to load the tooltip from an object instead of the title, and that object has an ID of "tt1".
    • This was added so you could display content on your site that varies.
  • <div id="tt1" style="display:none">TOOLTIP CONTENT GOES HERE</div> (required) - This div (or any object like <span>, <table>, etc.) can be located anywhere on the page. It can contain anything inside of it without worrying about quotes, single quotes or embeded video. Note that the style="display:none" must be included so that it won't show on the page (unless you want it to).
  • If your tooltip content just happens to contain a lot of #'s then you can change the tooltipObjectFlag to anything you want. But you must avoid using the following characters in the flag:
    

    . $ ^ { [ ( | ) * + ? \

    Add the new tooltipObjectFlag as follows (replace the text in teal to whatever flag you want):

    <script type="text/javascript">
    var tooltipObjFlag = "@@@";
    </script>
    

Tooltip CSS

Overall CSS

You can edit the CSS that is included with the code to modify your overall tooltip look. This CSS should be added into the Footer HTML because GuildPortal added the tooltip CSS after the Custom CSS which makes it override the definitions in the Custom CSS.

• Change the font color by modifying the text (in blue) - color:#dddddd;
• Change the background color of the tooltip (in blue) - background:#222222;
• Change the tooltip border thickness, style and color (red and blue) -  border: 1px solid #333333;
• You can remove or change the semi-transparent tooltips by changing the opacity setting. The "filter" is IE specific. Make sure the opacity is a deminal equivalent of the filter opacity ( 0.9 = 90% )
  

  opacity: 0.9;
  filter: alpha(opacity=90);

• Additionally you can add a soon to be supported CSS class called border-radius which makes your tooltip have rounded edges. The "-moz-border-radius" is specific to Firefox browsers and is currently working.
  

  border-radius: 1em;
  -moz-border-radius: 1em;

  The "1em" means to make the size equal to 100% of the height of the current font size.
  
  
• CSS ID's
  

  CSS ID*	Assigned to tooltips made from:
  #tooltip	".tooltip" class
  #tooltip2	old tooltip script (dtips.js)
  #preview	".preview" & ".screenshot" class

  
  * I had to keep all these CSS ID's separate to make the script work properly.

Specific Tooltip CSS

Your tooltips can have a different style depending on where it is located.

• For example, you can make all the tooltips located in the Banner area have a large bold font. Here is the CSS:
  

  .BannerArea #tooltip { font-size: 120%; font-weight: bold; }

• Or, change all the tooltips in the progression box to have a blue background. *Note* the tooltips designed to work with the old tooltip script (dtips.js) will have an ID of "tooltip2"
  

  #progBox #tooltip2 { background: #0000ff }

• Modify the preview or screenshot tooltips by separating them from the #tooltip definitiion in the CSS. You can also assign the class to have a different style depending on where it is located.
  
  The below CSS for the "preview" & "screenshot" class will make the background color transparent and make the image 100% opaque (since the definition above makes the tooltip 90% opaque). The second bit of CSS will make all the captions red if it is inside the "link" box.
  

  .gallery #preview { background: transparent; opacity: 1; filter: alpha(opacity=100); }
  .links #preview { color: #ff0000;  }

Tooltip Display Speed

• The last thing you can modify with the script is it's display speed. This really isn't part of the CSS, but I'm lazy and didn't feel like adding another section LOL. The display speed tells the script how long it should take to show the tooltip. Add the following anywhere ABOVE the tooltip.js script link.
  

  <script type="text/javascript">
  var tooltipSpeed = 600;
  </script>
  

  The default speed is 300 milliseconds. You can't use negative values (no going back in time!!) and I wouldn't recommend going above 1000 milliseconds or your site users will begin to hate you.

Edit (6/6/2009): Added some additional information about the tooltip CSS
Edit (6/7/2009): Combined the #screenshot CSS into the #preview class to match changes made with the script. I also added one line of CSS to set the tooltip width.
Edit (8/29/2009): Added screenshot (website thumbnail preview) option by websnapr.com

In case you copied the tooltip.js file to your site:

This script has been updated to use the "live" version of jQuery. Whatthatmeans is the tooltips will now work in any new content that is addedafter the page is loaded (e.g. the tooltips will now work within the Content Box of the Forum Post Menu on the home page of the Help-Site.)