Jump to content
Sign in to follow this  
ShadowMage

Multiline Title

Recommended Posts

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.

Edited by jkloth

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Edited by thescientist

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. :)

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Nobody? Surely someone must know...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×