是否可以在此工具提示中插入換行符？
[英]is it possible to insert a line break in this tooltip?
問題描述
我有一張漂亮的美國地圖：
http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg
我想實現一個具有多行功能的工具提示，例如紅色方塊：
http://www.carto.net/papers/svg/gui/tooltips/
請幫我開始吧。 我會在此提供最大的賞金。
9 個解決方案
解決方案1
4 2010-08-25 18:33:17
為什么不使用一些jQuery魔術並使用標題“屬性”而不是標題“標簽” ？
我認為你在原來的問題中混淆了這兩個問題
看看這個jsFiddle
我也使用了jQuery Tools Tooltip
標記 注意：基本上您需要做的就是將title屬性和addtooltip類添加到要添加工具提示的任何頁面元素。 然后，您可以使用CSS來設置工具提示的樣式，但您認為合適。
<path
id="AK"
class="addtooltip"
style="fill:#f2d0ff"
onmousemove="GetTrueCoords(evt);"
title="this sis ak<br>with a line break">
</path>
CSS
.tooltip {
display:none;
background-color:black;
font-size:12px;
height:40px;
width:160px;
padding:25px;
color:#fff;
}
腳本 （頁面底部）
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".addtooltip").tooltip();
}); // closes document.ready
</script>
解決方案2
1 2012-08-31 12:12:31
我通過創建工具提示值達到了這個<br/>從我的服務器端。
解決方案3
1 2010-08-25 17:58:11
別。
頁面標題將傳遞給瀏覽器，而不會在頁面中呈現; 通常這意味着它顯示在應用程序的標題欄中 。 實際上渲染一個換行符會使標題欄高兩倍（或更多，有多個換行符） - 而且這不會發生。
解決方案4
1 2010-08-26 18:18:28
顯然，這是一個已知問題，您必須像這樣處理它：
<desc>
<tspan x="10" y="10">An orange</tspan>
<tspan x="10" y="24.5">circle</tspan>
</desc>
解決方案5
1 已采納 2010-08-26 18:44:24
你永遠不會讓我驚訝，I__！ 你在做多少個項目？
工具提示是瀏覽器生成的快速彈出窗口; 你應該使用\\n在JavaScript中設置.title屬性。
解決方案6
0 2014-09-30 15:33:42
鼠標懸停在SVG元素上，帶有<title>子元素是最簡單的選擇，可以縮短它。 FF / Chrome都會將它擴展為一行。 IE會自動將其限制為大約50個字符。 以下將采用looooong工具提示並斷開其行，在單詞之間的所需位置插入換行符（\\ n）。 可以在填充<title>文本之前/之后應用String.prototpye函數。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG ToolTip line breaks</title>
</head>
<body>
<center>
Three Elements Contained in a <g>, plus a <title> element,<br /> used as its tooltip.<br />
<svg width=400 height=400>
<g>
<circle cx=150 cy=150 r=60 fill=red />
<rect x=200 y=200 width=60 height=60 fill=lime />
<ellipse cx=300 cy=300 rx=60 ry=20 fill=blue />
<title id=myToolTip>This is a tool tip for this symbol (a group of elements), that will help describe what it is</title>
</g></svg>
<br /><button onClick=wrapToolTip(25)>wrap tooltip</button>
</center>
</body>
<script>
/* --- Adds SVG line break at space between words when it would exceed the max length
(or if a single loooong word exceeds the Max Line length)
Also usable for HTML line break by including true arg---
*/
String.prototype.fullWrap= function(maxLineLength,htm){
var str1, tem, ax, diff, lim, S= [], br;
var A= this.split(/\\s*\//);
while(A.length){
str1= A.shift();
while(str1 && str1.length> maxLineLength){
if(ax=== 0 && /^\\S/.test(str1)) S[S.length-1]+= '-';
tem= str1.substring(0, maxLineLength);
ax= tem.lastIndexOf(' ')+ 1;
if(ax== 0){
S.push(str1.substring(0, maxLineLength-1));
str1= str1.substring(maxLineLength-1);
}
else{
tem= str1.substring(0, ax);
str1= str1.substring(ax);
S.push(tem);
}
}
if(str1) S.push(str1);
}
if(htm)
br="<br/>" //--html--
else
br="\n" //----text line break
return S.join(br);
}
function wrapToolTip(maxLen)
{
myToolTip.firstChild.data=myToolTip.firstChild.data.fullWrap(maxLen)
}
</script>
</html>
解決方案7
0 2010-08-25 17:59:38
html中的換行符是<br /> 。 您可以隨意添加。
僅供參考 - 沒有名為'field1'的標簽，因此你的getElementsByTagName調用什么也找不到。
解決方案8
0 2010-08-25 17:59:42
添加<br/>你想要休息。
解決方案9
0 2010-08-25 17:59:56
那么，這取決於你希望Line Break顯示在哪里......
如果應該在頁面上看到你應該添加一個<br /> ，如果你需要只顯示在頁面代碼上，你應該添加一個\\n 。
如果你想要做你問的事情，你只需要在你的代碼來代替,在<br />如果這個文本將在HTML工具提示進行顯示。 如果這將顯示在Javascript警報中，您應該使用\\n 。
jQuery工具提示添加換行符
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.