-Html Fbml Kodu.tr.gg-

<style>
#link1_tooltip {
    position: relative;
    width: 150px;
    border: 2px solid black;
    padding: 5px 10px;
    color: black;
    font-weight: bold;
    background-color: red;
}
#span1_tooltip {
    position: relative;
    width: 200px;
    border: 2px solid blue;
    padding: 5px 10px;
    color: blue;
    font-weight: bold;
    background-color: yellow;
}
.fauxLink {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}
</style>


<p>Using <a id="link1" href="http://www.daveclarkconsulting.com/" class="tooltip">links</a> for Easy DHTML ToolTips,<br>
and using <span id="span1" class="fauxLink tooltip">spans</span> for Easy DHTML ToolTips.</p>

<div id="link1_tooltip">
  <p>Link tooltip content...</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div id="span1_tooltip">
  <p>Span tooltip content...</p>
  <p>Ma quande lingues coalesce, li grammatica del.</p>
</div>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Dave Clark | http://www.DaveClarkConsulting.comLicensed under: U.S. Copyright
 */

/*
  Easy DHTML ToolTips * by Dave Clark I (a.k.a., MrNobody) * Copyright (c) 2009 * All Rights Reserved

    Author: Dave Clark Consulting
   Website: http://www.DaveClarkConsulting.com
  Location: Terra Bella, CA, USA

  Right to copy, use, and distribute (for free) granted as long as this header remains intact.

  To use, link this JavaScript external library file at the end of your page's BODY section.
  Then, just give your link, span, etc., a unique id and a special class value which
  identifies that HTML element as having an associated tooltip.  The association is made
  by giving the associated tooltip element an id which is a combination of the original
  element's id and special class with an underscore character between them.  For example:
  You have a word or phrase which should have a tooltip displayed.  You can wrap that word
  or phrase in SPAN tags and give the SPAN tag an id of "span1" and use "tooltip" as the
  special class value.  Then you would define a DIV whose content is to be the tooltip.
  That DIV would be given an id of "span1_tooltip" in order to associate it with the SPAN.
*/

var MyEasyToolTips = new EasyToolTips('tooltip', 'MyEasyToolTips');

function EasyToolTips(className, usrObjName)  { // Easy Tool Tips Constructor Function
  var strict = document.documentElement && document.documentElement.scrollHeight && document.documentElement.scrollHeight > 0;
  var toolid, dAttrs = (strict) ? document.documentElement : document.body;
  GenEasyToolTips(document.links, this);
  GenEasyToolTips(document.getElementsByTagName("SPAN"), this);

  function GenEasyToolTips(list, output) {
    var x, tip, len = list.length;          // find out how many items in list
    for (x=0; x<len; ++x) {           // loop on document links to find tooltips
      if(list[x].id                   // link must have an id
      && list[x].id > " "                 // which is greater than blanks
      && list[x].className                // and a class name
      && list[x].className.indexOf(className) >= 0    // containing the specified class name
      && (tip = document.getElementById(toolid=(list[x].id+"_"+className)))) {   // associated tool tip is link id + _className
        output[toolid] = new EasyToolTip(list[x], tip); // generate an easy tool tip entry
      }
    }
    output.show = function(tooltip, event) {      // generic tooltip show function
      tooltip.style.display = "block";          // show tooltip
      var tx = event.clientX + 10 + dAttrs.scrollLeft;  // initial tooltip x placement
      var ty = event.clientY + 10 + dAttrs.scrollTop;   // initial tooltip y placement
      var dx = dAttrs.clientWidth + dAttrs.scrollLeft;  // current document x max viewable
      var dy = dAttrs.clientHeight + dAttrs.scrollTop;  // current document y max viewable
      if (tx+tooltip.offsetWidth > dx) tx = dx - tooltip.offsetWidth;
      if (ty+tooltip.offsetHeight > dy) ty = event.clientY - 5 - tooltip.offsetHeight + dAttrs.scrollTop;
      tooltip.style.left = tx + "px";           // final tooltip x placement
      tooltip.style.top = ty + "px";            // final tooltip y placement
      event.cancelBubble = true;              // cancel event bubbling
      return false;                   // skip any other event handling
    }
    output.hide = function(tooltip, event) {     // generic tooltip hide function
      tooltip.style.display = "none";           // hide tooltip
      event.cancelBubble = true;              // cancel event bubbling
      return false;                   // skip any other event handling
    }
  }

  function EasyToolTip(owner, tooltip) {       // generate an easy tool tip entry
    tooltip.style.display = "none";             // start tooltip off as non-display
    tooltip.style.position = "absolute";          // tooltip will be absolutely positioned
    tooltip.style.zIndex = "+2";              // tooltip will float above document content
    tooltip.style.left = "0px";               // start tooltip off at document left
    tooltip.style.top = "0px";                // start tooltip off at document top

    this.easytip = tooltip;                 // save a pointer to the tooltip
    if (window.Event) {                  // if there is a static Event object then event-time event block is passed to handler
      owner.onmouseover = new Function("event", "return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)");
      owner.onmouseout = new Function("event", "return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)");
    } else {         // else event-time event block is global
      owner.onmouseover = new Function("return "+usrObjName+".show("+usrObjName+"['"+toolid+"'].easytip, event)");
      owner.onmouseout = new Function("return "+usrObjName+".hide("+usrObjName+"['"+toolid+"'].easytip, event)");
    }
  }
}
</script>