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

【问题标题】：How to display pop up div for dynamically created database elements如何为动态创建的数据库元素显示弹出 div
【发布时间】：2014-05-29 22:43:19
【问题描述】：

我有一个包含 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>

【问题讨论】：

类似于THIS FIDDLE 中的词汇表？你只需要css
PowerTip 的文档显示：jsfiddle.net/stevenbenner/2baqv javascript、css、html 和实时页面视图都在窗格中，便于查看。
仅供参考，您的标记无效。 UL 中应该有的唯一元素是 LI（或脚本元素）。
谢谢雨果，我会解决这个问题

标签： javascript jquery html css

【解决方案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>

【讨论】：

谢谢，很好的回应，因为它也给了我一些 powertip 的好功能

【解决方案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}

【讨论】：

反应不错，我更喜欢 powertip 选项，因为它给了我一些不错的附加功能，但这是一个很好的仅 css 方法

【解决方案3】：

您需要为此执行 Javascript 进程。

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

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

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

【讨论】：

你不需要“javascript”。 css 会做的很好
您提供的不错的解决方案。 +1

【解决方案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 文件。

【讨论】：