Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Tyson's Corner, VA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Pure CSS Tooltip - Width issue

    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.
    Code:
    /* 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
    Code:
    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
    Code:
    #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
    Code:
    <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.
    Code:
    <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
    Code:
    /* 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}
    */

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

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

    Code:
    <!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:

    Code:
    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;
    }

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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.

    Code:
    <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

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

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Tyson's Corner, VA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by Scriptet View Post
    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'.

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Tyson's Corner, VA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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.)
    Code:
    /* 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;
    }
    Code:
    <span id="pop"><ul><li><u style='border-bottom: 1px groove black;'>text</u><span class="up">pop</span></li></ul></span>

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Location
    Tyson's Corner, VA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    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.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

    Code:
    top: 15px;
    left: -50px;
    The values may be wrong for your app but they should give you an idea.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <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=ht...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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •