Anchor ‘title’ quesiton.

@JMRKERJun 20.2007

I know I can put a pop-over message associated with a link like this: ?

[code=php] <a href=”#” title=’Popover message when mouse is held over the anchor link’>Anchor Link</a> [/code]

But, can I break the title somehow to display the pop-over as two or more lines?

I have tried:
title=’Popover message when mouse is <br />held over the anchor link’
and
title=’Popover message when mouse is nheld over the anchor link’
and
title=’Popover message when mouse is nheld over the anchor link’

Appreciate any comments. ?

to post a comment

HTML

8 Comments(s) _↴

@WebJoelJun 20.2007 — #"virtual returns"

<a href="#" title='[B]Popover message when mouse is held over the anchor link[/B]'>Anchor Link</a>

becomes

<a href="#" title='[B]Popover message when

mouse is held over

the anchor link[/B]'>Anchor Link</a>

@FangJun 20.2007 — #Only in IE

&lt;a href="#" title='Popover message when mouse is held over the anchor link' onmouseover="this.title='Popover message when mouse isn held over the anchor link';"&gt;Anchor Link&lt;/a&gt;

@JMRKERauthorJun 20.2007 — #Thanks to you both.

Since I could not get it to work cross-browser, I changed it to a CSS solution.

For me this worked better even if it is not ideal.

@WebJoelJun 21.2007 — #There's always adding a "<span>tooltip text</span>" applied to the link and styling this with among other things, width, to 'force' the text to contrain or "line wrap". Positioned, you could have this appear next-to, underneith or to the side~of the hover-over anchor link..

-Figured it would be a bit much to explain but if you are interested, I could generate a sample. Yes, -virtual return' only works in IE (and it's a bain as it also causes problems with list item under some situations...) :mad:

@JMRKERauthorJun 21.2007 — #@WebJoel,

I figured out how to make the "popover" appear beside and below the link (using the <div> and/or <span> tags with CSS styling), but I haven't discovered how to make it appear as it really "popped-over" the link as it does in the <a title="xxx"> tag.

If it's not too much trouble, I would like to see how you do it with multi-line output displayed. ?

@forum moderators

I realize this is the HTML forum, but my original question was how to do multi-lines with the 'title' assignment. If the moderators believe this should be now shifted to the CSS forum (or elsewhere), I would understand.

Thank you.

@WebJoelJun 21.2007 — #@WebJoel,

.... I would like to see how you do it with multi-line output displayed. [/QUOTE]

Sample: ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

a:link {color:#212121;}

a:visited {color:#008080;}

a:hover {color:#FF0000;}

a:active {color:#000000;}

/* above: controls colors of links */

.buttons a {color:#000000; background-color:white; display:block;

font:13px arial, sans-serif; font-weight: bold; text-decoration:none;

margin-top:3px}

/* Above: controls how 'buttons' anchors behave */

.buttons a:hover {background-color:#ffffff; font:13px verdana;

font-weight: bold; text-decoration:none;}

/* Above: controls how 'buttons anchor on-hover' behave */

#menu {position:relative; width:160px; height:auto;

text-align: center; padding:10px 0 10px 0; border:1px double silver;}

/* Above: the actual "menu", a list of links */

#menu a span {display:none;}

/* Above: how the "<span>text la-la-la text</span>" is handled */

#menu a:hover span {

display:block; position:absolute;

top:145px; left:10px;

width: 125px;

z-index: 100;color:black;

background-color:#fff99d; padding:10px; font:1em Verdana, sans-serif;

border:1px solid black;

/* Above: how the <span>text la-la-la text</span> is handled when

hovering over the visible link-text (the 'pop-up') */

}

</style>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

<div id="menu" class="buttons">

<div id="menu">

<a href="http://www.w3cschools.com">w3cschools<span>World Wide Web Consortium ("W3C") Schools Web Site</span></a>

<a href="http://www.webdeveloper.com">webdeveloper.com<span>WebDeveloper.com Forums, offering free help with your web pages.</span></a>

<a href="http://www.msn.com">MSN<span>The MSN Start page: A useful "HOME PAGE" as place to start your daily search.</span></a>

<a href="http://joelburdick.awardspace.com">My Site<span>Joel's online site of published web sites.</span></a>

<a href="http://joelburdick.awardspace.com/carved_wood">Ontario Carved Driftwood<span>A Wood-carved Elephant Head that

I made this past summer from driftwood that I found here in Toronto by Lake Ontario.</span></a>

</div>

</div>

</body>

</html>[/QUOTE]

@JMRKERauthorJun 21.2007 — #@WebJoel,

Dang, that's pretty close to the way the HTML 'title' display works.

A lot closer than what my feable attempts looked like to create the multi-line popovers.

I've not combined so much CSS code together myself, so it may take a while to decipher it.

Thanks for the example to study. ?

@WebJoelJun 21.2007 — #@WebJoel,

Dang, that's pretty close to the way the HTML 'title' display works....
[/QUOTE]
-Except that you can 'style' this with different positions, and font-family, weights, colors, widths, letter-spacing... -[I]and it works in ALL browsers[/I], not just IE...

I'd have shown this first but figured if you hadn't tried the first suggestion of 'virtual line breaks' that only work in IE, this would be a fairly big step-up, but this method here is far better than~.

Also in #HTML _↴

table td td tag issue Iframe - 'Page cannot be displayed' in IE6 What errors can I expect by changing DOCTYPE from XHTML strict to Transitional?

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Anchor ‘title’ quesiton.

8 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Anchor ‘title’ quesiton.

8 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #HTML _↴