473,809 Members | 2,826 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Positioning a tooltip relative to a div

2 New Member
The css i've got set up is:
Expand|Select|Wrap|Line Numbers
  1. a.tip span {
  2.     display:none;
  3. }
  4.  
  5. a.tip:hover span {
  6.     display:block;
  7.     position:absolute;
  8.     left:670px;
  9.     background-color:#F8F8F8;
  10.     border: 1px dashed lightgray;
  11. }
  12.  
The containing div (660px wide) has position set to relative, this way when the user hovers over the tool tip it appears in the same x position each time and the y position varies with the tooltip (so it's like a little popup in the page margin that appears parallel to the link).

What i'm stuck on is positioning it so that it's in line vertically with the anchor. At the moment it appears one line below where i'd like it. I've tried adding in top:-1em, but obviously that just move it to 1em above the div each time. It seems to be like I want the x positioning relative to the container, but the y position relative to the anchor which would clearly cause problems.

Also, when the tooltip span is position outside the div, the width seems to go funny and only allows a single word per line. This is changed by adding a width parameter, but it's not ideal for small tips.

Any suggestions?

Thanks!
Apr 15 '10 #1
2 2240
MusoFreak200
96 New Member
hey mate...

can you please supply a link...

thanks mate...
Apr 16 '10 #2
physicsjosh
2 New Member
Sure,

www.struckbylightning.co.uk/

It's all placeholders so none of the links actually go anywhere and those articles are fake, but anyway. Hover over ADC.
Apr 16 '10 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

0
3288
by: Ethan Trewhitt | last post by:
www.adobe.com has a set of menus that popdown when there's a mouseover, positioned nicely below the buttons shown. However, they use absolute postitioning ... is there a way to do such positioning on any arbitrary element that might show up anywhere in a page, not knowing the actual pixel location? Pretend I make an element "display: none" in css. It no longer affects layout and might as well not exist, but what if I could make it still...
9
32067
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. However, there are images that I used absolute positioning in order to place them in the appropriate location on my page. When I do a browser resize, these images do not move (obviously). However, the rest of my content is auto centered as...
4
2719
by: Jane Withnolastname | last post by:
I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here: http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example) The problem is, under the image is a large table. But using the above positioning, now the table starts at the top of the page and runs underneath the image.
14
2485
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block." Please take a look at http://gavelcade.com/abspos.html and help me understand why my nested, absolutely positioned divs are being positioned with respect to the page rather...
0
1184
by: Robert | last post by:
Hi, I am having difficulties to render a tooltip in Internet Explorer 6. It keeps hiding behind a relative positioned DIV. It renders fine in Firefox. You can see a simplified example at: http://www.xs4all.nl/~rvanloen/example/tooltip/tooltip2.html I (think I) need the relative position to position the tooltip. Are the better ways to render the tooltip without any relative
2
2512
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web page controls were all over the place. "Ironically, absolute positioning is relative. Yes, you read that right. An absolutely positioned element is positioned relative to another element, called the containing block. Here comes the definition...
5
1888
by: aljamala | last post by:
Hi, I have a group of 5 tables laid out of the web page. 2 go on the left side and 3 on the right. These tables retrieve data from the database so the number of records (rows) returned varies. So the problem I am having at the moment is that if the table gets longer by one or two rows, all my alignment goes of out whack for the other tables. Is there a way for example to place table #2 right after table#1 ends?
6
2919
by: Mark | last post by:
hi, i'm trying to position something in the top right corner of a container, but i can't seem to figure out how to get it working. here's the html <div class='thumb'><a href='image.jpg'><img src='photos/thumbs/ bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div> where 'thumb' is my container, and 'del' should be aligned to the top right. here's the css
2
1932
by: TheCruelPanda | last post by:
Hey there. My name is Rowan, and it's been three weeks since I last used tables for an HTML design. Okay, I'm rather new to CSS and I have a big positioning problem here. It might not be a really huge problem, but I've been fighting it for days, and have received no help so far. Have a look at this (try it out in IE and Firefox please) http://www.discoverourmusic.com/rowan/css/home.html - The problem's with the fairy at the top. On...
0
9600
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10376
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10375
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10114
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7651
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6880
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4331
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3860
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3011
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.