PDA

View Full Version : ToolTip CSS



cloodo
07-01-2008, 05:22 AM
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.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:


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


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


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


Also, do the same on its closing tag:


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


Change the highlighted to </p>.

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


<p class=\'rangJust\'>


...and in your CSS, add this:


.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 <span class="textClass">.. Obviously, when this is substituted with your <p class=\'textClass\'> it works perfectly.. I am not sure if it is the <span> 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:


class=\'someClass\'


Hope that makes sense :)

cloodo
07-02-2008, 03:19 AM
Thanks again Rangana..

Yes that makes sense.

(Cebu is one of my favorite holiday spots.. beaches, night clubs and lots of fun).