如何创建大于一行的工具提示？

Question

我有html元素，我希望在悬停的工具提示中显示更多信息，而不是实际适合一个短行。

如何创建大于一行的工具提示？ （在浏览器中看起来像右键菜单的东西 - 但没有功能）

重要的是我可以控制断点，因为工具提示中显示的每一行都可能包含不同长度的文本。

示例：

<div title="1.Exampleline1\n2.Exampleline2\n3.Exampleline3 this one is longer"> //three rows - not one!

这是一个示例工具提示：

编辑：它应该适用于所有浏览器（也是FF）！

Answer 1

如果您只定位支持the latest specification或仅支持IE和Safari的浏览器，则可以使用  （回车）。否则请查看CSS tooltips。

关于在工具提示中使用回车的

This similar question有更多信息。

Answer 2

更新 在FF / Chrome

中进行了测试

  

  
• DEMO 2： http://jsbin.com/eharu5/3
  

<强> CSS

a.tooltip {
    position: relative;
}
a.tooltip span em {
    font-style: normal;
    display: block;
    border-bottom: 1px dotted #000;
}
a.tooltip span {
    white-space: nowrap;
    border: 1px solid #CCC;
    color: #333;
    padding: 5px;
    background: #FFF;
    left: 50%;
    top: 0;
    width: auto;
    position: absolute;
    display: none
}
a.tooltip:hover span {
    display: block
}
a.tooltip span br {
    display: none
}

<强> HTML

<a class="tooltip">Hello World
  <span>
    <em>Lorem Ipsum Est Lorem <br />Ipsum Est Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est</em> 
    <em>Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est Lorem Ipsum Est</em>
    <em>Lorem Ipsum Est</em>
  </span>
</a>

Answer 3

如果你不能仅使用HTML找到一个好的解决方案，那么用JavaScript（实际上是jQuery）做一个很好的方法。你应该看看yensdesign这个很好的教程： http://yensdesign.com/2009/01/how-to-display-tips-creating-jquery-plugin/

Answer 4

你不能让工具提示更大，但是当它们悬停在光标上时你可以使DIV浮动在光标附近。

http://snipplr.com/view/3624/show-floating-div-near-cursor-on-mouseover-hide-on-mouseout/

Answer 5

我使用overlib来处理这类事情，因为它包括使工具提示变得粘稠，智能地定位它们的选项（例如，如果源位于浏览器窗口的八个边缘，则向左），并且您可以轻松地设置它们的样式。

http://www.bosrup.com/web/overlib/