求教关于tooltip的问题

想做出这样的一个效果，但鼠标放到特定的字符上，会显示一个跟着鼠标走的tooltip，而且是可以包含图片和html的tooltip，效果参考http://www.css8.cn/index1.asp右边"藏的饰件"下方的图标，当鼠标移上去后会有tooltip

解决方案 »

  1.   

    我有一个可用的页面，但是要用到javascript,每次打开页面都要提示我是否要启动javascript脚本,很麻烦，能否有办法不让浏览器提示，或直接用css来处理<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Simple Tooltip</title>
    <style>
    .Text{
            font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
            font-size: 8pt;
            font-weight: normal;
            font-style: normal;
            color: #333333;
            text-decoration: none;
    }
    .toolTip {
            font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
            font-size: 8pt;
            filter:alpha(opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
            /* comment the above 3 line if you don't want transparency*/
    }</style>
    <script language="javascript" defer="false">
    //browser detection
        var agt=navigator.userAgent.toLowerCase();
        var is_major = parseInt(navigator.appVersion);
        var is_minor = parseFloat(navigator.appVersion);    var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
                    && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
                    && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
        var is_nav4 = (is_nav && (is_major == 4));
        var is_nav6 = (is_nav && (is_major == 5));
        var is_nav6up = (is_nav && (is_major >= 5));
        var is_ie     = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
    </script>
    <script language="JavaScript">
    //tooltip Position
    var offsetX = 0;
    var offsetY = 5;
    var opacity = 100;
    var toolTipSTYLE;function initToolTips(){
      if(document.getElementById){
              toolTipSTYLE = document.getElementById("toolTipLayer").style;
      }
      if(is_ie || is_nav6up)
      {
        toolTipSTYLE.visibility = "visible";
        toolTipSTYLE.display = "none";
        document.onmousemove = moveToMousePos;
      }
    }
    function moveToMousePos(e)
    {
      if(!is_ie){
        x = e.pageX;
        y = e.pageY;
      }else{
        x = event.x + document.body.scrollLeft;
        y = event.y + document.body.scrollTop;
      }  toolTipSTYLE.left = x + offsetX+'px';
      toolTipSTYLE.top = y + offsetY+'px';
      return true;
    }
    function toolTip(msg, fg, bg)
    {
      if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip
      {
        if(is_nav4)
            toolTipSTYLE.visibility = "hidden";
        else
            toolTipSTYLE.display = "none";
      }
      else // show
      {
        if(!fg) fg = "#777777";
        if(!bg) bg = "#ffffe5";
        var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' +
                                      '<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+
                                      '<font face="sans-serif" color="' + fg + '" size="-2">' + msg +
                                      '</font></td></tr></table>'+
                                      '</td></tr></table>';
       if(is_nav4)
        {
          toolTipSTYLE.document.write(content);
          toolTipSTYLE.document.close();
          toolTipSTYLE.visibility = "visible";
        }    else if(is_ie || is_nav6up)
        {
          document.getElementById("toolTipLayer").innerHTML = content;
          toolTipSTYLE.display='block'
        }
      }
    }s = '<table width="100%" cellspacing="2" cellpadding="0" border="0">';
    s += '<tr><td><img src="http://upload.wikimedia.org/wikipedia/meta/2/2a/Nohat-logo-nowords-bgwhite-200px.jpg" border="0"/> </td><td valign="top">WikiPedia</td></tr>';
    s += '<tr><td colspan="2" class="Text"><hr/>this is a test for simple tooltip. <br/>You can add text and images to the tooltip</td></tr>';
    s += '</table>'function show(){
            toolTip(s)
    } //--></script>
    </head>
    <body onload="initToolTips();">
    <div id="toolTipLayer" style="position:absolute; visibility: hidden;left:0;right:0"></div>
    <br/><br/><br/><br/>
    <span onMouseOver="toolTip('simple Tooltip Text here')" onMouseOut="toolTip()" class="Text">Simple Tooltip</span>
    <br/><br/>
    <span onMouseOver="toolTip('Tooltip with colors set', '#FFFF00', 'orange')";  onMouseOut="toolTip()";  class="Text">Tooltip with Font Colors Set</span>
    <br/><br/>
    <span onMouseOver="show()" onMouseOut="toolTip()" class="Text">Tooltip with Images and Text</span>
    <br/><br/>
    <span class="Text"> The Microsoft .NET Framework is a software component that can be added to or is included with Microsoft Windows operating system. It provides a large body of pre-coded solutions to common program requirements, and manages the execution of programs written specifically for the framework. The .NET Framework is a key Microsoft offering, and is intended to be used by most new applications created for the Windows platform.</span>
    </body>
    </html>
     
      

  2.   

    <script type="Javascript">
    function showHidden()
    {
       document.getElementById("child").style.display="block";
       document.getElementById("child").style.left=window.ClinetX;
       document.getElementById("child").style.top=window.ClientY;
    }
    </script>
    <div id="Tips" style="display:none; position:absolute;"></div>
    <div onmousemove="showHidden();"></div>http://hi.baidu.com/ystar/blog/item/05e492238ee4f140ad34de14.html
      

  3.   

    问题在于js 实现的话，现在浏览器老是要提示我是否要启动javascript脚本,很麻烦，能否有办法不让浏览器提示，或直接用css来处理