[英]How to fixed position of arrow not depending on content in Jquery Tooltip?
While applying tooltip on textbox , it coming fine the only problem is that i have an issue in handing the position of arrow according to content in title attribute. 在文本框上应用工具提示时,唯一的问题是我在根据title属性中的内容处理箭头的位置时遇到问题。 For short title arrow is coming fine(middle of textbox) but for long title the arrow is going up to the textbox.
对于简短标题,箭头会很好(文本框的中间),但是对于较长标题,箭头会向上转到文本框。 Here is the JSFiddle code link:
这是JSFiddle代码链接:
$(function() {
$( document ).tooltip({
position: {
my: "left center",
at: "right+10 center",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo( this );
}
}
});
}); });
You don't need to add the extra class arrow
to the tooltip. 您无需在工具提示中添加额外的类
arrow
。 You can use the :before
pseudo class on the class .ui-tooltip
. 您可以在
.ui-tooltip
类上使用:before
伪类。
.ui-tooltip {
padding: 10px 12px;
color: Black;
font: 8pt "Helvetica Neue", Sans-Serif;
max-width: 150px;
background: white;
border: 1px solid #999;
position: absolute;
}
.ui-tooltip:before {
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #999;
position: absolute;
top: 50%;
margin-top: -10px;
margin-left: -22px;
}
Also check this the updated Fiddle . 还要检查此更新的小提琴 。
You can set 你可以设定
top:50%
Or use this 或使用这个
Only this code.. this is what you exactly want..:) 只有这段代码..这正是您真正想要的.. :)
.arrow {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: 50%;
margin-top: -10px;
left: -20px;
border:10px solid #999;
border-top-color:transparent;
border-left-color:transparent;
border-bottom-color:transparent;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.