效果类似于HTML标签的title效果，不过标签的title属性依赖于系统边框，可控制性不强。要实现这种效果，可以使用JS或者CSS，不过个人感觉如果CSS能够完成的效果就不要依赖于JS，避免不必要的性能损失。

涉及到CSS的知识很简单，:hover伪类和定位(position)。需要注意的是：IE6中除了A标签，其他的标签都不支持:hover伪类属性，这种情况下必须用JS实现类似的效果。具体来说，如果浏览器是IE6，那么鼠标移到目标元素的时候，给其添加.hover类，移走的时候则移除.hover类。

首先来看一下HTML结构。

    <ul class="js-engine">
      <li rel="chrome">
        <span>Chrome: V8</span>
        <p>The V8 JavaScript engine ... </p>
      </li>
      <li>
        <span>Firefox: JaegerMonkey</span>
        <p>JägerMonkey (also JaegerMonkey) ... </p>
      </li>
      <li>
        <span>Opera: Carakan</span>
        <p>Opera全新JS引擎Carakan...</p>
      </li>
      <li>
        <span>Safari: Nitro</span>
        <p>The new JavaScript engine ... </p>
      </li>
      <li>
        <span>IE9: Chakra</span>    
        <p>Chakra is a JScript engine developed by Microsoft ... </p>
      </li>
    </ul>  

从HTML结构上来说，没有什么难以理解的地方。在这种结构下，想要达到提示效果，CSS的:hover伪类属性就要绑定在li标签上。为了避免提示的内容弄乱页面的显示效果，有必要绝对定位提示内容。CSS样式如下，效果请猛击此处。

    .js-engine {
      font-family: 'microsoft yahei', verdana, arial;
      list-style: none;
      line-height: 1.8;
    }
    .js-engine p {
      display: none;
    }
    .js-engine li {
      position: relative;
      border: 1px solid #708090;
      margin: 1px 0;
      padding: 2px 4px;
      width: 200px;
    }
    .js-engine span {
      cursor: pointer;
    }
    .js-engine li:hover {
      background-color: #dcdcdc;
    }
    .js-engine li:hover p {      
      position: absolute;
      display: inline-block;
      top: -1em;
      left: 100px;
      width: 400px;
      font-size: 12px;
      text-align: justify; 
      background-color: #000;
      opacity: 0.9;
      z-index: 2222;
      color: #fff;
      padding: 6px 8px;
      border-radius: 6px 6px 6px;
      -webkit-border-radius: 6px 6px 6px;
      -moz-border-radius: 6px 6px 6px;      
    }