Multiline Title

[ShadowMage]

Hey guys, quick question here. Anyone know how to make a multi-line title on an element? What I mean is this:<input type='button' id='aBtn' value='AButton' title='This is a& #013;multi-line title' />The above works in IE, but FF won't create the new line. I also tried the line feed (& #10; ) entity but that didn't work either. Anybody know how to do this?Thanks.

[thescientist]

if you force a size on the element, will the text wrap down?

[ShadowMage]

if you force a size on the element, will the text wrap down?

This is on the title attribute of the tag. I just noticed that I forgot to put a space in the entity tags so I edited my post to show the entities I'm using.

[thescientist]

This is on the title attribute of the tag. I just noticed that I forgot to put a space in the entity tags so I edited my post to show the entities I'm using.

ah ha, I getcha, another case of me reading too fast. You making tooltips?

[ShadowMage]

ah ha, I getcha, another case of me reading too fast. You making tooltips?

Yea. I want to avoid using JS if I can. It's not a big deal if I have to though.

[thescientist]

Hmm, I've definitely done multi-line tooltips, but that wasn't using the title property though.

[ShadowMage]

Hmm, I've definitely done multi-line tooltips, but that wasn't using the title property though.

So, JavaScript is my only option then, eh?

[thescientist]

well, the way I learned to do it was with CSS; :hover and span. Could that work for you? Hover should be able to work on any element.

[ShadowMage]

well, the way I learned to do it was with CSS; :hover and span. Could that work for you? Hover should be able to work on any element.

I was thinking about using :hover but I can't seem to wrap my mind around how it's going to work. Will the tooltip be positioned by the element I'm hovering on?I was kinda thinking the CSS might look like this:

.hoverItem span {   position: absolute;   visibility: hidden;}.hoverItem:hover span {   visibility: visible;}

Except I'm not sure how to position the span in relation to the item I'm hovering on as it will change. The data is generated with a loop in PHP so there will be multiple .hoverItem elements.

[thescientist]

On my (old, and unfortunately current - redesign in progress as we speak!) site, analogstudios.net, you'll see I'm using it for the calendar. Please ignore the many bad practices that litter my site... HTML

<td bgcolor="#FFFF00"><center><a href="shows.php" class="tooltip">21<span>Dave Flamand - Acoustic @ The Albion </span></a></center></td>

CSS

a.tooltip{  position: relative;}a.tooltip span{  display: none;}a.tooltip:hover span{  display: block;  position: absolute;  top: 1em;  left: 2em;  padding: 0.2em 0.6em;  border: 1px solid #996633;  background-color: #FFFF66;  color: #000000;}

Basically the span is hidden, until hovered. With relative and absolute positioning, we keep the span near the element that we're hovering over, simulating the effect one would get from the title attribute.and, of course, give due credit, I got it out of this book from Andy Budd, who I see since looking this up just now has second edition of this book! cool man, hope that helps.

[ShadowMage]

Yes, it does! I forgot about the relative positioning bit. :)Thanks!

[boen_robot]

For future reference's sake, google it...

[ShadowMage]

For future reference's sake, google it...

If I always knew what I was googling, I would. But alot of the time, I would call something one thing when in fact it's called something else and then I'd be sifting through all kinds of useless links.But, I do see your point. I'll try to remember that for next time.

[ShadowMage]

OK, I successfully used this technique on the project I was working on when I started this thread. Now I tried to use it on a different project and it partially works. My tooltips show up when I hover on the menu items, but they are constrained by the width of my menu. What I mean is, the text in my tooltips wraps to a new line when it reaches the edge of the menu instead of extending beyond it. No matter how I position the tooltips, they always wrap at the edge of my menu.Here's an attempt to illustrate the problem.

#content {	background-color: #E5E5E5;	padding-top: 3px;	overflow: auto;}#menu {	width: 175px;	float: left;}#menu li {	background-color: #DDDDDD;	background: -moz-radial-gradient(center, #A9A9A9, #DBDBDB 80%);	-moz-border-radius: 3px;	border: 1px solid #CCCCCC;	margin-bottom: 1px;}#menu li:hover {	background-color: #CFCFCF;	background: -moz-radial-gradient(center, #E7E7E7, #ADADAD 80%);}.tipContainer {	position: relative;}.tooltip {	position: absolute;	top: -20px;	left: 0px;	visibility: hidden;	background-color: #303099;	background: -moz-radial-gradient(center, #9090FD, transparent 95%);	color: #F3F322;	z-index: 10;}.tipContainer:hover .tooltip {	visibility: visible;}

And the HTML:

<div id='content'><ul id='menu'>	<li class='tipContainer'>New Animal<span class='tooltip'>Add a new animal to the herd</span></li>	<li class='tipContainer'>Breeding<span class='tooltip'>Add a new breeding record</span></li>	<li class='tipContainer'>Freshening<span class='tooltip'>Add a new freshening record</span></li>	<li class='tipContainer'>Treatment<span class='tooltip'>Add a new treatment record</span></li>	<li class='tipContainer'>Toggle View<span class='tooltip'>Toggle between detail view and datasheet view</span></li></ul></div>

[ShadowMage]

Well, I fixed it by adding white-space: nowrap to the tooltip class. But....why do I have to have the nowrap specified? I thought absolute position was supposed to remove it from the flow, meaning it would no longer be constrained by its parent's dimensions?

[real_illusions]

If the parents position is relative, then positioning a child element with absolute will only make it absolute compared to its parent element, not the entire page. Other things may happen with other combinations.

[ShadowMage]

If the parents position is relative, then positioning a child element with absolute will only make it absolute compared to its parent element, not the entire page. Other things may happen with other combinations.

Ah, right. Didn't think of that. Thanks.

[ShadowMage]

Ok here's another question. How do I get the tooltip to show up in front of my header? I can't seem to get it to come forward. I've tried setting position: relative and z-index of the .tipContainer class, the #menu, and the #bodyWrap and none of them seem to work. The first tooltip ('New Animal' button) is cut off by the #tabNav menu above it.HTML:

<div id='wrapper'><div id='header'>	<img src='images/cow.png' alt='Logo' />	<h1>Herd Management</h1>	<h3>Dairy Herd Database Management System</h3>	<ul id='tabNav'>		<li>Home</li>		<li>Reproduction</li>		<li>Health</li>		<li>Production</li>		<li class='floatRight'>Youngstock</li>	</ul></div> <!-- End header div --><div id='bodyWrap'><ul id='menu'>	<li class='tipContainer'>New Animal<span class='tooltip'>Add a new animal to the herd</span></li>	<li class='tipContainer'>Breeding<span class='tooltip'>Add a new breeding record</span></li>	<li class='tipContainer'>Freshening<span class='tooltip'>Add a new freshening record</span></li>	<li class='tipContainer'>Treatment<span class='tooltip'>Add a new treatment record</span></li>	<li class='tipContainer'>Toggle View<span class='tooltip'>Toggle between detail view and datasheet view</span></li></ul></div> <!-- End bodyWrap div --></div> <!-- End wrapper div -->

CSS:

div#wrapper {	width: 900px;	margin: 0px auto;	padding: 4px;}#header {	background-color: #CDCDCD;	overflow: auto;}#header img {	float: left;	margin: 0px 4px;}#header h1 {	font-size: 38pt;	color: #303088;}#header h3 {	font-size: 24pt;	color: #202088;}ul {	list-style: none;	padding: 2px 3px;}ul li {	text-align: center;}ul li:hover {	cursor: pointer;}#tabNav {	background-color: #202088;	color: #F3F322;	clear: both;	overflow: auto;}#tabNav li {	float: left;	width: 135px;	background: -moz-radial-gradient(center, #3030ED, #202088 85%);}#tabNav li.floatRight {	float: right;}#tabNav li:hover {	background-color: #F3F322;	background: -moz-radial-gradient(center, #F9F922, #B3B311 80%);	-moz-border-radius: 3px;	color: #202088;}#bodyWrap {	background-color: #E5E5E5;	padding: 3px;	overflow: auto;}#menu {	width: 125px;	float: left;}#menu li {	background-color: #DDDDDD;	background: -moz-radial-gradient(center, #A9A9A9, #DBDBDB 80%);	-moz-border-radius: 3px;	border: 1px solid #CCCCCC;	margin-bottom: 1px;}#menu li:hover {	background-color: #CFCFCF;	background: -moz-radial-gradient(center, #E7E7E7, #ADADAD 80%);}.tipContainer {	position: relative;}.tooltip {	position: absolute;	top: -22px;	left: 95px;	visibility: hidden;	background-color: #303099;	background: -moz-radial-gradient(center, #9090FD, transparent 65%);	color: #F3F322;	z-index: 10;	white-space: nowrap;	padding: 12px 85px;}.tipContainer:hover .tooltip {	visibility: visible;}

I don't really know what else to try. I thought the z-index is supposed to bring it out in front if it's a higher number. I tried resetting all elements to z-index: 0 too and that didn't work. Maybe it's because my menu is floating?

[ShadowMage]

Nobody? Surely someone must know...