Is It Possible To Insert A Line Break In This Tooltip?

August 27, 2023 Post a Comment

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

Markupnote: 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)

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scriptsrc="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script><scripttype="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><tspanx="10"y="10">An orange</tspan><tspanx="10"y="24.5">circle</tspan></desc>

Solution 5:

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

JavaScript OfficialSite