如何做一个允许鼠标移入的tooltip

jquery 有没有允许鼠标移入的tooltip,如何使用?在tooltip中显示超链接.

解决方案 »

  1.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!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 charset="utf-8">
    <title>Tooltip Example by Codefans.net</title>
      <style type="text/css">
      
       body {font-size: 85%; font-family: helvetica, verdana, arial, sans-serif;}
      
    h1 {font-size: 1.3em;}

    h2 {font-size: 1.2em;}
    table { width: 70%; border-collapse: collapse;}
    th {text-align: left;}
    code {font-size: 1.1em;}
    td { border: 1px solid #ccc; border-width: 1px 0; padding: 3px 6px;}

    #livetip {
      position: absolute;
      background-color: #cfc333;
      padding: 4px;
      border: 2px solid #9c9;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
    }  </style>
        
    </head>
    <body>
      <h1>Event Delegation Tooltip, with DRY script!</h1>
    <table id="mytable">
      <thead>
        <tr>
          <th>row number</th>
          <th>link with tooltip</th>
        </tr>
      </thead>
      <tbody>
        <tr id="row1"><td>row 1</td><td><a title="this is a link to row 2000" href="#row2000"><strong>row 2000</strong></a></td></tr>
        
        <tr id="row2"><td>row 2</td><td><a title="this is a link to row 1999" href="#row1999">row 1999</a></td></tr>
        
        <tr id="row3"><td>row 3</td><td><a title="this is a link to row 1998" href="#row1998">row 1998</a></td></tr>
        
        <tr id="row4"><td>row 4</td><td><a title="this is a link to row 1997" href="#row1997">row 1997</a></td></tr>
        
        <tr id="row5"><td>row 5</td><td><a title="this is a link to row 1996" href="#row1996">row 1996</a></td></tr>
        
        <tr id="row6"><td>row 6</td><td><a title="this is a link to row 1995" href="#row1995">row 1995</a></td></tr>
      </tbody>
    </table>
    <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
    <script type="text/javascript">
    jQuery(function($) { var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');//将div 元素添加到body 对象中                     //append(content) 向每个匹配的元素内部追加内容。
    var tipTitle = '';

    $('#mytable').bind('mouseover mouseout mousemove', function(event) {
      var $link = $(event.target).closest('a');
      if (!$link.length) { return; }
      var link = $link[0];

      if (event.type == 'mouseover' || event.type == 'mousemove') {
    $liveTip.css({
      top: event.pageY + 12,
      left: event.pageX + 12,
    });
      };

      if (event.type == 'mouseover') {
    tipTitle = link.title;
    link.title = '';
    $liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
    .show();
      };

      if (event.type == 'mouseout') {
    $liveTip.hide();
    if (tipTitle) {
    link.title = tipTitle;
    };
      };
    });
    });
    </script>
    </body>
    </html>试一下，看看你不是你想要的效果留q：295218001