CODEWITHSUNDEEP
javascripthtmlcsstipsy
user1256042
user1256042

Reputation:

Tipsy Tooltip arrow trouble

i am making a toolbar with the tipsy tool tip. I changed the CSS to change the color, then i made am image for the arrow. here is a link to the image: http://www.novaprogramming.com/tipsy.png the color is: #454545 For some reason it will not show up?

Upvotes: 0

Views: 1576

Answers (2)

r4vn
r4vn

Reputation: 151

Your arrows are stored in a css sprite, this means you need to set the background-position correctly, in order to display an arrow. There are 4 arrows in your sprite: north, east, south and west, each located centered at the corresponding rim. Your current css for these arrows assumes that the arrow is always located in a corner which isn't true. To display the arrows you have to correct these properties like this:

.tipsy-n .tipsy-arrow {
    background-position: center top;
    left: 50%;
    margin-left: -4px;
    top: 0;
}
.tipsy-s .tipsy-arrow {
    background-position: center bottom;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-e .tipsy-arrow {
    background-position: right center;
    height: 9px;
    margin-top: -4px;
    right: 0;
    top: 50%;
    width: 5px;
}
.tipsy-w .tipsy-arrow {
    background-position: left center;
    height: 9px;
    left: 0;
    margin-top: -4px;
    top: 50%;
    width: 5px;
}

The first value of background-position specifies the horizontal position and the second value the vertical position of the image. You could also use percent values instead of keywords which looks like this:

.tipsy-n .tipsy-arrow {
    background-position: 50% 0;
    left: 50%;
    margin-left: -4px;
    top: 0;
}
.tipsy-s .tipsy-arrow {
    background-position: 50% 100%;
    bottom: 0;
    left: 50%;
    margin-left: -4px;
}
.tipsy-e .tipsy-arrow {
    background-position: 100% 50%;
    height: 9px;
    margin-top: -4px;
    right: 0;
    top: 50%;
    width: 5px;
}
.tipsy-w .tipsy-arrow {
    background-position: 0 50%;
    height: 9px;
    left: 0;
    margin-top: -4px;
    top: 50%;
    width: 5px;
}

Upvotes: 1

Abhidev
Abhidev

Reputation: 7253

Since the arrow image is an image sprite...you need to specify background-position property. Check the tis out http://jsfiddle.net/hwsns/2/ . Note the css I have added

Upvotes: 1

Related Questions