ToolTip CSS

**cloodo** · 07-01-2008, 05:22 AM

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

The script allows you to position the tooltip using the 'X and Y' attributes. This works fine.

The CSS looks like a normal CSS code.. it should allow you to add Background images, padding and so on..

The problem: I've added a background image to my tooltip. I presume that the rule for the background image would be simple, i.e, background image remains in position regardless of padding. However, when I add the padding to the tooltip CSS, it seems to move the actual tooltip itself. (as if I'm changing the 'X and Y' attributes. The problem result is that I cannot seem to be able to center my text inside the tooltip.

Any suggestions?

Thanks all.

**rangana** · 07-01-2008, 11:07 AM

Please provide us a link to the page in question.

**cloodo** · 07-01-2008, 11:23 AM

Hi Rangana,

The link: http://cloodo.com/index1.php

The linked text is the blurp in bold letter in the top center area. The first linked text tooltip contains text, the other 2 are empty.. you will see the disposition of the text. I hope you can work it out and help me out coz I'm just about given up.

Thanks again.

**rangana** · 07-02-2008, 12:30 AM

Change the highlighted:

Code:

onMouseover="ddrivetip('<span>Your universe is made of the people and things that

to (default) block level element (, <div>). Let's try  element.

Code:

onMouseover="ddrivetip('<p>Your universe is made of the people and things that

Also, do the same on its closing tag:

Code:

with everyone.</span>')" onMouseout="hideddrivetip()">

Change the highlighted to .

Now, it's time to play on CSS. Add the highlighted on your  tag:

Code:

<p class=\'rangJust\'>

...and in your CSS, add this:

Code:

.rangJust
{
padding:45px 30px; /* Padding of element having class name rangJust (top right bottom left) */
}

See if it helps.

**cloodo** · 07-02-2008, 02:21 AM

Thank you Rangana.. The fix works.. I added a credit on the CSS code.

(note: I have tried allocating a css class to the text before but it didn't work.. What I did was .. Obviously, when this is substituted with your it works perfectly.. I am not sure if it is the tag, or, the class inside it (\'textClass\'), or, both. I need to learn more about the difference between (class="someClass") and <class=\'someClass\').

Many Thanks

**rangana** · 07-02-2008, 02:30 AM

To explain the difference:

class="someClass" is the normal look on markups, but since we are feeding the contents to JS, we have to escape the quotes, or else, the script will throw an error. Thus the result of adding the highlighted:

Code: