Question

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

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

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

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

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

Answer 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>

Answer 2

别。

页面标题将传递给浏览器，不会在页面中呈现;通常这意味着它出现在应用程序的title bar中。实际上渲染一个换行符会使标题栏的高度增加一倍（或更多，有多个换行符） - 而这种情况不会发生。

Answer 3

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

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

Answer 4

你永远不会让我惊讶，I__！你在做多少个项目？

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

Answer 5

我通过在服务器端使用 创建工具提示值来实现此目的。

Answer 6

html中的换行符为 。您可以随意添加。

仅供参考 - 没有名为'field1'的标签，因此你的getElementsByTagName调用什么也找不到。

Answer 7

在您希望休息的位置添加 。

Answer 8

嗯，这取决于你希望Line Break显示在哪里......
如果您应该在页面上看到它，则应添加 ，如果您只需要在页面代码上显示，则应添加\n。如果您想要执行您已经问过的事情，只需在代码中替换,  ，如果此文本将显示在HTML工具提示中。如果这将显示在Javascript警报中，您应该使用\n。

Answer 9

鼠标悬停在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 &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>

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

9 个答案: