是否可以在此工具提示中插入换行符？答案

【问题标题】：is it possible to insert a line break in this tooltip?是否可以在此工具提示中插入换行符？
【发布时间】：2014-09-30 23:33:42
【问题描述】：

我有一张漂亮的美国地图：

http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg

我想实现一个具有多行功能的工具提示，例如在红色方块上：

http://www.carto.net/papers/svg/gui/tooltips/

请帮助我开始。我将为此提供最大的赏金。

【问题讨论】：

出于什么目的？标题显示在浏览器标题栏中，不会显示换行符。
您如何想象浏览器标题栏中显示的内容？
这个问题没有任何意义。你为什么要在那里换行？是在前三个词之后还是随机的？尝试更好地解释您的问题。
问题毫无意义。在您的示例中，没有换行符。然后你谈论工具提示......你的问题真的是，“我如何在工具提示中放置换行符？”
绝对不要使用 <title></title>你上面使用它的方式。这是完全错误的。改为使用<[element] title="" />

标签： javascript html svg tooltip

【解决方案1】：

为什么不使用一些 jQuery 魔术并使用标题 “属性” 而不是标题 “标签”？
我想你在你原来的问题中混淆了这两者

看看这个 jsFiddle

http://jsfiddle.net/s5qUw/2/

我也用过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>

【讨论】：

底线是您使用的TITLE 标签全错了。不要那样使用它。但是，您可以在所有页面元素上使用 title 属性。看看我稍微修改过的答案。
不，我不能建议（凭着我自己的良心）让您对自己的工作方式进行细微的改变。因为你做错了。 Title 标签永远不能那样使用。
查看答案中的 JSFiddle 示例。它只是使用 jQuery 库和 jQuery Tools 库（我也在答案中链接到）。
1) 您缺少 jquery 库 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>...2) 您应该将所有脚本元素放在页面底部。
这是一个关于如何将 javascript 添加到 SVG 的示例 - apike.ca/prog_svg_jsanim.html

【解决方案2】：

你总是让我惊讶，我__！你在做多少个项目？

工具提示是浏览器生成的快速弹出窗口；您应该使用\n 在JavaScript 中设置.title 属性。

【讨论】：

他们一直在扔我。我什至没有编程方面的教育。一天我在做 SQL 第二天 SVG。但是我从 soverflow 得到了很多抱怨，因为我问了太多问题
问题是这里的人跟我说话好像我是一个经验丰富的 javascript 程序员。我对 JAVASCRIPT 一无所知
不同的浏览器以不同的方式处理标题属性中的换行符——一些渲染换行符，一些将它们视为通用空格，一些显示不可打印的字符字符。应该避免它们。
Firefox 14、IE 9 和 Chrome 21 似乎都将 \n 视为标题工具提示中的换行符。

【解决方案3】：

不要。

页面的标题交给浏览器，不在页面中渲染；通常这意味着它会显示在应用程序的title bar 中。实际上渲染一个换行符会使标题栏的高度增加一倍（或更多，有多个换行符）——这不会发生。

【讨论】：

【解决方案4】：

显然，这是一个已知问题，您必须这样处理：

<desc>
   <tspan x="10" y="10">An orange</tspan>
   <tspan x="10" y="24.5">circle</tspan>
</desc>

【讨论】：

但我觉得你肯定在做某事
我想您必须考虑适合您的应用程序的 x/y 值。您可能会将其放置在屏幕外或至少某个不可见的地方。弄乱x / y？不确定它们是相对于它们所在的元素还是相对于整个文档。
你能告诉我你发现这个已知问题的来源吗
'tspan' 元素需要一个“文本内容块元素”父级来显示任何内容，请参阅w3.org/TR/SVGTiny12/intro.html#TermTextContentBlockElement（对于 SVG 1.1，唯一的此类元素是“文本”）。尽管在 'desc' 元素中它不会做太多事情，除非脚本将其拉出并尝试以某种方式显示它。
如果你想使用上面的脚本，那么你需要修改脚本来处理多行，因为它似乎不受支持。或者您可以切换到另一个解决方案。您也许可以从 carto.net/papers/svg/gui/tooltips 找到一个可行的解决方案，它显示多行 svg 工具提示。

【解决方案5】：

我通过在服务器端使用<br/> 创建工具提示值来实现这一点。

【讨论】：

【解决方案6】：

html 中的换行符是<br />。你可以在任何你喜欢的地方添加它。

仅供参考 - 没有名为“field1”的标签，因此您的 getElementsByTagName 调用将一无所获。

【讨论】：

非常感谢，我更新了我的问题。如果我能澄清任何事情，请告诉我
您可以使用替换功能轻松地将逗号替换为
标签（如 partick dw 建议的那样）。但是，我还是有点迷茫。您正在使用 getElementsByTagName 查找“desc”标签 - 有效 html 中没有此类标签，此搜索将失败。
根据问题下方的建议，那么我必须如何在工具提示中放置换行符？

【解决方案7】：

在您想要休息的地方添加<br/>。

【讨论】：

【解决方案8】：

嗯，这取决于您希望换行符显示在哪里...
如果应该在页面上看到，则应添加<br />，如果您需要仅在页面代码上显示，则应添加\n。
如果您想做您所要求的事情，您只需在代码中替换 , 中的 <br />，如果此文本将显示在 HTML 工具提示中。如果这将显示在 Javascript 警报中，您应该使用 \n。

【讨论】：

非常感谢，我更新了我的问题。如果我能澄清任何事情，请告诉我

【解决方案9】：

鼠标悬停在带有<title> 子元素的SVG 元素上是最简单的选择，因为它可以缩短。 FF/Chrome 都将其扩展为一行。 IE 会自动将其限制为大约 50 个字符。以下将采用 looooong 工具提示并换行，在单词之间的所需位置插入换行符（\n）。 String.prototpye 函数可以在填充<title> 文本之前/之后应用。

<!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 &lt;g>, plus a &lt;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>

【讨论】：