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

我有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