[英]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.
我改变了CSS来改变颜色,然后我做了箭头的图像。 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?
这里是图像的链接: http ://www.novaprogramming.com/tipsy.png颜色是:#454545由于某种原因它不会出现?
Since the arrow image is an image sprite...you need to specify background-position property. 由于箭头图像是图像精灵......您需要指定背景位置属性。 Check the tis out http://jsfiddle.net/hwsns/2/ .
检查http://jsfiddle.net/hwsns/2/ 。 Note the css I have added
注意我添加的CSS
Your arrows are stored in a css sprite, this means you need to set the background-position correctly, in order to display an arrow. 您的箭头存储在css精灵中,这意味着您需要正确设置背景位置,以便显示箭头。 There are 4 arrows in your sprite: north, east, south and west, each located centered at the corresponding rim.
你的精灵中有4个箭头:北,东,南和西,每个都位于相应边缘的中心。 Your current css for these arrows assumes that the arrow is always located in a corner which isn't true.
这些箭头的当前css假定箭头始终位于不正确的角落。 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. background-position的第一个值指定水平位置,第二个值指定图像的垂直位置。 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.