如何为动态创建的数据库元素显示弹出式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>

Answer 2

不需要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:

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

Answer 3

您需要为此做一个Javascript处理。

你如何构建你的页面?它是一个静态页面吗?还是动态的?如果它是动态的，我假设你已经有了一个javascript函数。

为每个元素添加一个调用，就像文档中描述的那样:

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

Answer 4

使用PowerTip时，你需要在" title "属性中包含你想要作为工具提示的文本:

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

然后在javascript中:

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

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