...

View Full Version : Pure CSS Tooltip - Width issue



intellilogic
11-14-2009, 05:32 PM
I am hoping to get a Tooltip that auto adjusts the width, works in line with text, like in the middle of a paragraph and goes out to the right, lining up with the left side of the text I am working with. I have also had some that go off the edges of the pages, that's no good either, heh. I guess at this point I am open to JS methods, if it is thin and works much like my current CSS methods. I don't want something that fade in and out or annoys the users, I intend to use this a lot, like I do on my resume page: http://www.poweredbyone.com/resume.php

My 'Pop' method lines up with the left, auto adjusts the width, but does NOT work in line with text, because it is a list item.

'Pure CSS Tooltip' works in line with the text, but has really funny limitations on the width. When I take out position:relative from a.info{}, the width is a bit more pliable, but then I start to have other issues.

You can see everything I am talking about LIVE on my test page, double underline is the Pop method, underlined with red after mouse over is the Pure CSS method.
My test page: http://www.poweredbyone.com/css_help.php

---------------

Here is the CSS I am using, or attempting to make work for me.


/* Pure CSS Tooltip */
a.info{position:relative;z-index:24;text-decoration:none}
a.info:hover{z-index:25;}
a.info span{display: none;}
a.info:hover span{
display:block;
position:absolute;
z-index: 0;
text-align: left;
width: auto;
max-width: 735px;
background: #fff;
-o-border-radius: 10px;
-icab-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: solid 1px #449BC7;
padding: 7px;
cursor:text;
}


Here is the original, that never did what I needed either


a.info{position:relative;z-index:24;text-decoration:none}
a.info:hover{z-index:25;}
a.info span{display: none}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border: solid 1px #449BC7
text-align: center}


Here is a different method I have been working on for some time, that has it's own flaw of not fitting in-line with a paragraph


#pop ul {list-style: none;margin: 0;padding: 0 0 0 1px;}
#pop li:hover .up {visibility:visible;top:auto;z-index: 25;}
#pop li:hover a {}
#pop li {cursor: pointer;}
#pop .up {
position: absolute;
visibility:hidden;
background: #fff;
-o-border-radius: 10px;
-icab-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: solid 1px #449BC7;
width:auto;
max-width:735px;
z-index: 0;
padding: 7px;
cursor:text;
}


HTML Method for the Pure CSS Tooltip

<a class=info href="#">MouseHere<span>POW, text on mouse over</span></a>

Method for my crazy tooltip, that like I mentioned, does not work in line with text, because of the unordered list, I imagine.

<div id="pop"><ul><li>MouseHere<div class="up">POW, text on mouse over</div></li></ul></div>

To play around with the code and try to find a fix, one CSS file will do ya

/* POP */
#pop ul {list-style: none;margin: 0;padding: 0 0 0 1px;}
#pop li:hover .up {visibility:visible;top:auto;z-index: 25;}
#pop li:hover a {}
#pop li {cursor: pointer;}
#pop .up {
position: absolute;
visibility:hidden;
background: #fff;
-o-border-radius: 10px;
-icab-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: solid 1px #449BC7;
width:auto;
max-width:735px;
z-index: 0;
padding: 7px;
cursor:text;
}

/* Pure CSS Tooltip */
a.info{position:relative;z-index:24;text-decoration:none}
a.info:hover{z-index:25;}
a.info span{display: none;}
a.info:hover span{
display:block;
position:absolute;
z-index: 0;
text-align: left;
width: auto;
max-width: 735px;
background: #fff;
-o-border-radius: 10px;
-icab-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: solid 1px #449BC7;
padding: 7px;
cursor:text;
}


/* !semi-Original! Pure CSS Tooltip !semi-Original!
POS Relative is suposed to be key...
a.info{position:relative;z-index:24;text-decoration:none}
a.info:hover{z-index:25;}
a.info span{display: none}
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border: solid 1px #449BC7
text-align: center}
*/

Scriptet
11-14-2009, 06:19 PM
Hi,

Not too sure what you mean by auto-adjust the width but check out this quick example:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
/*This is Just for Presentation Only*/
body{
background:#333;
}
*{
margin:0;
padding:0;
}
p{
font-size:16px;
line-height:24px;
width:800px;
margin:30px auto;
background:#ccc;
border:3px solid #F99;
padding:10px;
font:Arial, Helvetica, sans-serif;
}
a.tooltip:hover span, a.tooltip span{
width:200px;
color:#000;
padding:10px;
text-decoration:none;
border:2px solid #000;
background:#FF9;
}

/*This is the functionality*/
a.tooltip{
position:relative;
}
a.tooltip span{
display:none;
}
a.tooltip:hover span{
display:block;
position:absolute;
left:0;
top:20px;
z-index:2;
text-decoration:none;
}
*html a.tooltip:hover{
visibility:visible;
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, <a href="#" class="tooltip">consectetur<span>Duis pellentesque ipsum sit amet lectus placerat fringilla. Sed elementum iaculis tortor, malesuada ultrices nisl vulputate in. Nunc auctor orci eu est egestas at commodo nisl aliquam. Integer dapibus sapien a nulla rhoncus consequat. Proin aliquam mi eu ligula sagittis at pulvinar odio rhoncus.</span></a> adipiscing elit. Curabitur egestas posuere diam, nec elementum velit convallis eget. Fusce vestibulum blandit mattis. Praesent mauris neque, ultricies et suscipit et, sagittis eget augue. Cras <a href="#" class="tooltip">mollis<span>Suspendisse convallis purus vitae sem malesuada eu imperdiet dolor suscipit. Aliquam porta viverra quam in vehicula. Fusce at dictum risus.</span></a> posuere nisi, eu pulvinar sapien convallis quis. Nullam lobortis consequat lorem nec egestas. Praesent at nisi tortor. Sed vitae vestibulum justo. Morbi luctus aliquam mollis. Suspendisse ultrices tellus id <a href="#" class="tooltip">libero<span>Curabitur at lorem non sem consectetur venenatis. Sed pretium tincidunt laoreet. Cras ut elit dolor, at pellentesque elit. Praesent vitae nibh a neque ultrices venenatis.</span></a> viverra malesuada. Curabitur vehicula rhoncus viverra.</p>
</body>
</html>


I seperated the presentation from the functionality in the CSS, so ignore the presentation part as that was just to create a quick look for the example.

Basically to break it down how it works:




This is so we can position the tooltips in relation to the link. So the SPANS inside it will be positioned absolutey relative to the link, rather than the whole screen as it would be if we did not have this line.

a.tooltip{
position:relative;
}

This is to hide the tooltips when they are not being hovered over.

a.tooltip span{
display:none;
}

This enables the tooltip to become visible on hover, more info next to each line..

a.tooltip:hover span{
display:block; - Makes it visible, changes it from display:none;
position:absolute; - Enables us to position the tooltip where we want
left:0; - In line with the link
top:20px; - 20px underneath the link
z-index:2; - So it appears above some other elements which might have a higher z-index
}

This is a fix for the tooltips to work in IE6

*html a.tooltip:hover{
visibility:visible;
}

bazz
11-14-2009, 07:14 PM
I had a page of mine recently which used the same html as you are - for your tooltip. trouble was, when I wanted to make a print version of the page, I got the link outputting as well as the tooltip when really, I only wanted the tooltip to output.

my new html works both for a web page and the print version if you want it.



<a class='tooltip' href='#'><span class='compulsory'>*</span><span class='the_tip'>Required</span></a>


I'll dig out the css and come back

OK, here it is



a.tooltip {
position:relative;
background-color:transparent;
text-decoration:underline;
z-index:24;
color:#000;
}
a.tooltip:hover{z-indez:25;}
a.tooltip span {
position:relative;
text-decoration:underline;
z-index:24;
}
a.tooltip:hover span{
z-index:24;
}
a.tooltip span.the_tip {
display:none;
}
a.tooltip:hover span.the_tip {
display:block;
position:absolute;
top:0em; left:4em; width:18em;
background-color:#000;
color:#fff;
text-align: center;
text-decoration: none;

}

* a.tooltip:hover{height:1%}


You can play about with it but I have it set so that it appears to the right and up a bit from the link and it is a fixed width. Not sure how to assign a variable width but % might work if the width you want must be relative to the page width.

PS, it's not really my html - I got help from CF. :thumbsup:

bazz

intellilogic
11-15-2009, 02:50 AM
Not too sure what you mean by auto-adjust the width...

It's my desire to fit anything from 1 word "word" to multiple paragraphs in my popup box. width:auto;max-width:735px; Auto adjusting the width, it goes as far right as 735px and then it forces a line return. But should the item be something small, it is only as big as the item. Putting a width dimension, "locking" it to a standard width, is not good enough. If you don't set a width, with 'Pure CSS' method, you get something like 100px width standard, I am guessing this has something to do with 'display:block;' or possibly 'position:relative'.

intellilogic
11-15-2009, 06:18 AM
Ok, here we go:
Now how to get the pop'd block under the text and aligned to the left? (like it was before I played with it.)

/* POP */
#pop {display:inline;} /* heres the magic! */
#pop *{display:inline;} /* heres the magic! */
#pop ul {list-style: none;margin: 0;padding: 0;}
#pop li:hover .up {visibility:visible;top:auto;z-index: 25;}
#pop li:hover a {}
#pop li {cursor: pointer;color: #449BC7;}
#pop .up {
position: absolute;
visibility:hidden;
background: #fff;
-o-border-radius: 10px;
-icab-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: solid 1px #449BC7;
width:auto;
max-width:700px;
z-index: 0;
padding: 7px;
cursor:text;
color: #666666;
}
/* IE 6 Fix */
*html #pop li:hover .up{
visibility:visible;
}

<span id="pop"><ul><li><u style='border-bottom: 1px groove black;'>text</u><span class="up">pop</span></li></ul></span>

bazz
11-15-2009, 01:50 PM
You need to help us to help you. This is the third piece of code you have tried to do the job whereas working on one, to get it right, would be a better way, I think.

bazz

intellilogic
11-15-2009, 02:06 PM
You need to help us to help you. This is the third piece of code you have tried to do the job whereas working on one, to get it right, would be a better way, I think.

bazz

What!? The one you offered still had width restraints, this one is a modified version of my original, which doesn't. The width is very important, I want to be a large amount of information in it. I am currently using the code I posted, not I want to change how it's positioned in respect to the text you mouse over. I lost how it originally was, when I changed it to this method. I am using it live here: http://www.poweredbyone.com/resume.php - I want to make it so that it sits below the linking-text and aligns to the left most part of the linking-text, as opposed to how it currently sits to the right side of the right most part of the linking-text. Once I fix this, this is case closed. :D

bazz
11-15-2009, 02:21 PM
OK; it was the lines with /* this is the magic bit */ which made me think it was copied from another thread here at CF and so was a completely new css section.

anyhoo, you need to add code to the .up class



top: 15px;
left: -50px;


The values may be wrong for your app but they should give you an idea.


bazz

abduraooft
11-15-2009, 02:30 PM
<span id="pop"><ul><li><u style="border-bottom: 1px groove black;">autodidact</u>
Your current markup is invalid. See http://validator.w3.org/check?uri=http%3A%2F%2Fwww.poweredbyone.com%2Fresume.php&charset=%28detect+automatically%29&doctype=Inline&group=0
You can't have a block level element inside an inline element. I'd recommend to recode your document following the markup rules.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum