Question

我想实现这种情况：用户悬停链接，并在屏幕上显示div并附加其他信息。

没有问题，生成具有绝对位置的div，填充数据并使用jQuery显示它，但问题在于可维护性。我想分开逻辑和观点。如果我将来要更改页面布局怎么办？程序员如何知道，JavaScript文件中存在某些部分页面？

它是一种优雅的方式来分离视图（在我的情况下是HTML结构）和逻辑（使用JS脚本从JSON中的服务器获得的数据）并将它们组合起来？它是否是......模板引擎或JavaScript中的类似内容？

Answer 1

Bootstrap完成所有这些以及更多：http://getbootstrap.com/javascript/#tooltips

将它放入：

$('#example').tooltip(options)

标记为：

<div class="tooltip">
  <div class="tooltip-inner">
    Tooltip text here!
   </div>
  <div class="tooltip-arrow"></div>
</div>

转到链接以获取有关如何实施它的更详细说明

Answer 2

您可以像这样生成HTML条目

<a>
    My Cool Link
    <div class="tooltip">
        This link is awesome!
    </div>
</a>

使用CSS设置工具提示的样式：（重要的部分是a:hover .tooltip以及background

上.tooltip以外的所有内容

a {
    display: inline-block;
}
a:hover .tooltip {
    visibility: visible;
}
.tooltip {
    position: relative;
    top: 20px;
    left: -50%;
    display: inline;
    visibility: hidden;
    background: #eee;
}

示例：http://jsfiddle.net/4K7sB/

然后你只需要使用JS填充正确文本的元素。

Answer 3

您可以通过某些程序或脚本动态更改Title =“信息”，并使用以下代码将其显示为工具提示，在网上找到它

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Answer 4

只需在div标签中添加title属性，如下面的代码....

<div  title="First Div">StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow </div>
</div>
<br /><br />
<div  title="Second Div">StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow 
StackOverFlow </div>
</div>

只需复制粘贴并检查。

JavaScript - 悬停时的工具提示div

4 个答案: