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 i would like to implement a tooltip with multiline functionality s

Solution 1:

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"> </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>

Solution 2:

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.

Solution 3:

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.

Solution 4:

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>

Solution 5:

I achieved this by creating the tooltip value with <br/> from my server side.