how to do a link tooltip

sixf00t4 · December 5th, 2004, 02:57 AM

how do you create a link that when you hover over it, a little description will show up. i can't find anything on google that is as simple as i think this should be.

sixf00t4 · December 5th, 2004, 02:59 AM

alt= , looked at the source here

Figgienfen · December 5th, 2004, 03:04 AM

Use a WYSIWYG... <img src="yourimage.yourextention" alt="your tooltip"> easy as that.

Blazer06 · December 6th, 2004, 10:36 PM

Yes, that works for images as well as links. And links that are images.

Though if you really wanted to have fun, you could use some javascript... and make little boxes diferent colors and stuff come up!!!

Blaze

sixf00t4 · December 6th, 2004, 10:40 PM

Quote:

Originally Posted by sixf00t4

i can't find anything on google that is as simple as i think this should be.

yeah, i know blaze. you don't have a few links though, for me to graze on, or others to stop by this thread, do?

Blazer06 · December 6th, 2004, 11:04 PM

Code:

<html>
  <style>
    .ttip {
      border:1px solid black;
      font-size:12px;
      layer-background-color:lightyellow;
      background-color:lightyellow;
    }
  </STYLE>

<script>
  var tip=new Array
    tip[0]='Tip #1'
    tip[1]='Tip #2'
    tip[2]='Blaze Rocks'
    tip[3]='Jen Rocks Too'
           
  function showtip(current,e,num)
    {
      if (document.layers) // Netscape 4.0+
        {
          theString="<DIV CLASS='ttip'>"+tip[num]+"</DIV>"
          document.tooltip.document.write(theString)
          document.tooltip.document.close()
          document.tooltip.left=e.pageX+14
          document.tooltip.top=e.pageY+2
          document.tooltip.visibility="show"
         }
       else
         {
           if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
             {
               elm=document.getElementById("tooltip")
               elml=current
               elm.innerHTML=tip[num]
               elm.style.height=elml.style.height
               elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)
               elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)
               elm.style.visibility = "visible"
             }
           }
         }

  function hidetip(){
    if (document.layers) // Netscape 4.0+
      {
        document.tooltip.visibility="hidden"
      }

    else
      {
       if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
         {
          elm.style.visibility="hidden"
         }
      } 
  }
</script>

<!-- CHANGE THE TIP STUFF HERE: -->
<div id="tooltip" style="position:absolute;visibility:hidden;border:1px solid black;font-size:20px;layer-background-color:lightyellow;background-color:blue;padding:1px"></div>

<a href="http://www.techimo.com" onMouseover="showtip(this,event,'0')" onMouseOut="hidetip()">Techimo</a>
<br>
<a href="http://www.blazeme.net" onMouseover="showtip(this,event,'1')" onMouseOut="hidetip()">BlazeMe</a>
<br>
<a href="http://www.700design.com" onMouseover="showtip(this,event,'2')" onMouseOut="hidetip()">700 Design</a>
<br>
<a href="http://www.resellerratings.com" onMouseover="showtip(this,event,'3')" onMouseOut="hidetip()">ResellerRatings</a>

</html>

Yip, I does.

Blaze