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

Question

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

我试过使用 Jquery PowerTip ( http://stevenbenner.github.io/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>

Answer 1

摆弄您的代码...将鼠标悬停在图像上以查看工具提示

jquery 函数使用类 img-polaroid 循环每个元素，然后通过 powerTip 函数设置将显示为弹出的标题。

http://jsfiddle.net/9tcTx/1/

$( document ).ready(function() {
    $(".img-polaroid").each(function(index,element){
        $(element).attr('title','element at ' + index);
        $(element).powerTip({
            placement: 'se' // north-east tooltip position
        });;
    });
});

html

<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>