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

我有html元素，我想在悬停的工具提示中显示更多信息，但实际上很适合放入一个较短的行中。如何创建比一行更大的工具提示？

如何创建比一行更大的工具提示？ （东西看起来像在布劳尔一个右键菜单 - 但无功能）

重要的是，我有过破发点控制，因为在工具提示中显示每行可能拥有不同长度的文本。

例子：

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

这是一个例子提示：

enter image description here

编辑：它应该工作在所有浏览器（FF太）！

来源

2011-02-25 Thariama

通过只使用css？ – 2011-02-25 15:28:29

如果你的目标只是支持the latest specification或只有IE浏览器和Safari浏览器，你可以使用（回车）。否则看看CSS tooltips。

This similar question关于在工具提示中使用回车符有更多信息。

来源

2011-02-25 15:20:46 justkt

它需要在Firefox中运行 – Thariama 2011-02-25 17:07:40

@Thariama - 那么我会考虑使用CSS，如Google认为返回的页面中所述或其他答案之一。 – justkt 2011-02-25 17:19:57

这里的问题是，我需要控制返回点 - 工具提示中显示的行确实需要保存不同长度的文本 – Thariama 2011-02-25 17:28:12

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

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

来源

2011-02-25 15:20:03 Thyamine

更新测试在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>

来源

2011-02-25 15:21:38

如果我将每个em-tag放在一个新行中 - 这可能吗？ – Thariama 2011-02-25 16:40:20

@Thariama：这不是必需的，如果你有这样的话，它也可以工作：'Hello WorldLorem Ipsum EstLorem Ipsum EstLorem Ipsum EstLorem Ipsum EstLorem Ipsum Est' – 2011-02-25 17:06:29

好吧，它正在多行显示，但我没有权力超过linebreak（第二行应该能够举行超过第一行） – Thariama 2011-02-25 17:27:03

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

来源

2011-02-25 15:23:43 3rgo

有没有多线方法治疗，你能举个例子吗？ – Thariama 2011-02-25 18:01:49

最后一个例子，第8行：他们使用'
'标签转到下一行：p – 3rgo 2011-02-28 19:42:50