固定poshytip提示框小箭头位置

最新推荐文章于 2018-08-01 15:21:29 发布

最新推荐文章于 2018-08-01 15:21:29 发布 · 307 阅读

文章标签：

#jquery #poshytip #ViewUI

web 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在PoshyTip样式文件中调整提示框箭头的位置，确保箭头在内容变化时保持固定。通过修改箭头样式，实现箭头相对于目标元素的相对定位。

在poshytip的样式文件中，可以看到提示框的小箭头默认是50%位置（以右弹为例）

.tip-yellowsimple .tip-arrow-left {
	margin-top:-4px; /* approx. half the height to center it */
	margin-left:-6px;
	top:50%;
	left:0;
	width:6px;
	height:9px;
	background:url(tip-yellowsimple_arrows.gif) no-repeat -27px 0;
}

为了避免提示框的箭头不随内容变多而改变位置，可以修改箭头的样式文件，我修改为距上20px

.tip-yellowsimple .tip-arrow-left {
	margin-top:-4px; /* approx. half the height to center it */
	margin-left:-6px;
	top:20px;
	left:0;
	width:6px;
	height:9px;
	background:url(tip-yellowsimple_arrows.gif) no-repeat -27px 0;
}

这样，小箭头的位置就可以相对target固定位置了。