is it possible to insert a line break in this tooltip?

Question

i have a pretty map of the US:

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/

please help me get started on this. i will be offering a maximum bounty on this.

Answer 1

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.

Answer 2

A line break in html is <br />. You can add that anywhere you like.

FYI - there is no tag named 'field1', so your getElementsByTagName call will find nothing.

Answer 3

Add a <br/> where you want the break.

Answer 4

Well, this depends on where do you want that Line Break to show...
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.
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. If this will be shown in a Javascript Alert you should use \n.

Answer 5

Why not use some jQuery magic and use the title "Attribute" instead of a Title "Tag"?
I think you're confusing the two in your original question

Check out this jsFiddle

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

I've also used the 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. Then you can use CSS to style the tooltip however you see fit.

<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 (bottom of your page)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt; </script>
<script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function () {
        $(".addtooltip").tooltip();
    }); // closes document.ready
</script>

Answer 6

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>

Answer 7

You never cease to amaze me, 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.