是否可以在此工具提示中插入换行符？
[英]is it possible to insert a line break in this tooltip?
问题描述
i have a pretty map of the US: 
我有一张漂亮的美国地图：
http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg
i would like to implement a tooltip with multiline functionality such as here over the red square: 我想实现一个具有多行功能的工具提示，例如红色方块：
http://www.carto.net/papers/svg/gui/tooltips/ http://www.carto.net/papers/svg/gui/tooltips/
please help me get started on this. 请帮我开始吧。 i will be offering a maximum bounty on this. 我会在此提供最大的赏金。
9 个解决方案
解决方案1
4 2010-08-25 18:33:17
Why not use some jQuery magic and use the title "Attribute" instead of a Title "Tag" ? 为什么不使用一些jQuery魔术并使用标题“属性”而不是标题“标签” ？
I think you're confusing the two in your original question 我认为你在原来的问题中混淆了这两个问题
Check out this jsFiddle 看看这个jsFiddle
http://jsfiddle.net/s5qUw/2/ http://jsfiddle.net/s5qUw/2/
I've also used the jQuery Tools Tooltip 我也使用了jQuery Tools Tooltip
Markup note: Basically all YOU need to do is add the title attribute and the addtooltip class to any page element that you want to add a tooltip to. 标记 注意：基本上您需要做的就是将title属性和addtooltip类添加到要添加工具提示的任何页面元素。 Then you can use CSS to style the tooltip however you see fit. 然后，您可以使用CSS来设置工具提示的样式，但您认为合适。
<path
id="AK"
class="addtooltip"
style="fill:#f2d0ff"
onmousemove="GetTrueCoords(evt);"
title="this sis ak<br>with a line break">
</path>
CSS CSS
.tooltip {
display:none;
background-color:black;
font-size:12px;
height:40px;
width:160px;
padding:25px;
color:#fff;
}
Script (bottom of your page) 脚本 （页面底部）
<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
Don't. 别。
The title of the page is handed off to the browser and not rendered in the page; 页面标题将传递给浏览器，而不会在页面中呈现; usually that means it shows up in the application's title bar . 通常这意味着它显示在应用程序的标题栏中 。 Actually rendering a newline would make the title bar twice as tall (or more, with multiple newlines) - and that's not going to happen. 实际上渲染一个换行符会使标题栏高两倍（或更多，有多个换行符） - 而且这不会发生。
解决方案4
1 2010-08-26 18:18:28
Apparently, this is a known problem and you have to handle it like this: 显然，这是一个已知问题，您必须像这样处理它：
<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
You never cease to amaze me, I__! 你永远不会让我惊讶，I__！ How many projects are you working on? 你在做多少个项目？
Tooltips are browser-generated quick popups; 工具提示是浏览器生成的快速弹出窗口; you should use \\n to set the .title attribute in JavaScript. 你应该使用\\n在JavaScript中设置.title属性。
解决方案6
0 2014-09-30 15:33:42
The mouseover an SVG element, with a <title> child element is the easiest choice, when it can be shortened . 鼠标悬停在SVG元素上，带有<title>子元素是最简单的选择，可以缩短它。 Both FF/Chrome will extend it in a single line. FF / Chrome都会将它扩展为一行。 IE will automatically limit it to about 50 characters. IE会自动将其限制为大约50个字符。 The following will take a looooong tooltip and break its line, inserting line breaks(\\n) at the desired location between words. 以下将采用looooong工具提示并断开其行，在单词之间的所需位置插入换行符（\\ n）。 The String.prototpye function can be applied before/after filling the <title> text. 可以在填充<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
A line break in html is <br /> . html中的换行符是<br /> 。 You can add that anywhere you like. 您可以随意添加。
FYI - there is no tag named 'field1', so your getElementsByTagName call will find nothing. 仅供参考 - 没有名为'field1'的标签，因此你的getElementsByTagName调用什么也找不到。
解决方案8
0 2010-08-25 17:59:42
添加<br/>你想要休息。
解决方案9
0 2010-08-25 17:59:56
Well, this depends on where do you want that Line Break to show... 那么，这取决于你希望Line Break显示在哪里......
If it should be seen on the page you should add a <br /> , if you need that to show only on the page code, you should add a \\n . 如果应该在页面上看到你应该添加一个<br /> ，如果你需要只显示在页面代码上，你应该添加一个\\n 。
if you want to do the thing you've asked you simply need to replace in your code the , in <br /> if this text will be shown in an HTML ToolTip. 如果你想要做你问的事情，你只需要在你的代码来代替,在<br />如果这个文本将在HTML工具提示进行显示。 If this will be shown in a Javascript Alert you should use \\n . 如果这将显示在Javascript警报中，您应该使用\\n 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.