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文件。

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

4 个答案: