Help with tooltip

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I've placed two images with tool tips on this test page

http://www.leathersolutions.org/test.php

I'm using this code for the tips

<!--
<style type="text/css">

a {
text-decoration: none;
}

a:hover {
position: relative;

}

a span {
display: none;
}

a:hover span {
display: block;
position: absolute; top: -50px; left: -5px; right: -5px;

/* formatting only styles */
padding: 5px; margin: 5px; z-index: 100;
background-color: #ffffff;
width: 100px;
border: 1px solid #c4b9b3;
border-radius: 7px;
color: #000000;
font: bold 9px Verdana;
/* end formatting */
}

</style>
-->

Ideally I would like the width of the boxes to be the same so added the width value, however by doing that the boxes are off centre to the left of the image.
I've tried various positioning text in the formatting to centre the boxes again but none worked. Any fresh ideas would be appreciated.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes

Posted 7 years ago

  • 1
Photo of Jeremy Paton

Jeremy Paton

  • 159 Posts
  • 16 Reply Likes
I put together a tutorial on how I got tool tips working on my site a while ago you can see the post: Here and the tutorial: Here

Hopefully that can help you out a bit.

PS: you can see the tool tips on my home page: Jesar|Arts
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hello Jeremy
Thanks but unfortunately your tutorial doesn't cover my particular problem.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi David,

To centre an object using CSS, I always use:

margin:0 auto;

This means that the top margin is 0 and the left and right are auto, which centres them.

Add this to the code relating to the positioning of the Tooltip DIV.

Hope this helps,

Andi
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Jeremy and Andi for your willingness to assist with this.

David - please let us know if you still have trouble with this.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Thanks Andi that almost worked, strangely enough its centred the bottom box but not the top which shouldn't happen should it?
Your thoughts would be appreciated.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hello Andi, unfortunately that's made it worse and changing the margin-top value doesn't move anything.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi David,

If you could revert the changes, and add the margin: 0 auto; as you did before, then publish the test page, I will use Google Chrome Developer tools.

Andi
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Thanks Andi, I've now done that.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi David,

Please change this:

a:hover span {
display: block;
position: absolute; top: -50px; left: -5px; right: -5px;


to

a:hover span {
display: block;
position: absolute; top: -38px; left: -5px; right: -5px;

That solves it for me - and I hope you too.

Kind Regards,

Andi
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Andi
It didn't help with mine, bottom tooltip is fine, top tooltip is biased to the right but not by as much as it was. Its probably something I can live with.
Thanks for your help with this.