Javascript 如何为动态创建的数据库元素显示弹出div

我有一个由40个员工图片缩略图组成的网格，当用户将鼠标悬停在每个元素上时，我想显示额外的文本（主要是他们的传记）

我尝试使用Jquery PowerTip（）来完成这项工作，但我不知道如何动态创建每个工具提示以连接到每个缩略图

我的Javascript技能很差，所以我希望有人能告诉我如何简单地在每个项目旁边悬停时显示每个人特有的弹出div

<div class="people-list-container">
<ul class="people-list">

<a href="/Person/Details/8045">
    <li>
        <img src="8045.jpg" class="img-polaroid" />
        Bob Smith                                   
        <br />
        Australia
    </li>
</a>

<a href="/Person/Details/8046">
    <li>
        <img src="8046.jpg" class="img-polaroid" />
        Jill Jane                                   
        <br />
        Australia
    </li>
</a>

<a href="/Person/Details/8047">
    <li>
        <img src="8047.jpg" class="img-polaroid" />
        John Doe                                   
        <br />
        Australia
    </li>
</a>    

// ETC ETC

</ul>
</div>

//等等

您需要为此执行一个Javascript过程

你如何建立你的网页？这是一个静态页面吗？还是动态的？ 如果它是动态的，我假设您已经有了一个javascript函数

只需为每个元素添加一个调用，如文档中所述：

$('#element').data('powertip', 'This will be the <b>tooltip text</b>.');

$（“#元素”）.data（'powertip'，'这将是工具提示文本'）；

处理您的代码。。。将鼠标悬停在图像上以查看工具提示

jquery函数使用img Polarioid类循环每个元素，然后设置将由powerTip函数显示为弹出窗口的标题

html

//等等

使用PowerTip，您需要在“标题”属性中包含要作为工具提示包含的文本：

<img src="8045.jpg" id="imageid" class="img-polaroid" title="Your Tooltip Text Here" />

---

它将直接放置在图像上方。请注意，您需要在页面中包含PowerTip javascript文件。

无需javascript。试着这样做：

<ul>
  <li class="person_info">
    <a href="#">
      Person info blablabla
      <span class="tip"> tip content </span>
    </a>
  </li>
  <li class="person_info">
    <a href="#">
      Person info blablabla
      <span class="tip"> tip content </span>
    </a>
  </li>
  <li class="person_info">
    <a href="#">
      Person info blablabla
      <span class="tip"> tip content </span>
    </a>
  </li>
</ul>

---

类似于中的术语表？您只需要css PowerTip show的文档：javascript、css、html和live page视图都在窗格中，便于查看。仅供参考，您的标记无效。您应该在

UL

中包含的唯一元素是

LI

（或脚本元素）。谢谢Hugo，我会解决这个问题，您不需要javascript。css将为您提供一个很好的解决方案+1谢谢，很好的响应，因为它还为我提供了powertipGood响应的一些不错的功能，我更喜欢powertip选项，因为它为我提供了一些不错的附加功能，但这是一种只使用css的好方法

<img src="8045.jpg" id="imageid" class="img-polaroid" title="Your Tooltip Text Here" />

$('#imageid').powerTip({
    placement: 'n',
    smartPlacement: true
});

<ul>
  <li class="person_info">
    <a href="#">
      Person info blablabla
      <span class="tip"> tip content </span>
    </a>
  </li>
  <li class="person_info">
    <a href="#">
      Person info blablabla
      <span class="tip"> tip content </span>
    </a>
  </li>
  <li class="person_info">
    <a href="#">
      Person info blablabla
      <span class="tip"> tip content </span>
    </a>
  </li>
</ul>

.person_info             { position: relative;}
.tip                     {display: none; position: absolute; left: 100%;}
.person_info:hover .tip  {display: block}