更改jquery工具提示箭头的位置

我试图在文本框附近将箭头的位置更改为左侧。
我怎样才能解决这个问题 ？？

我试过这个：

工作示例链接： http ： //jsfiddle.net/b8fcg/

HTML：

使用Javascript：

 $('input').tooltip({ position: { my: "left center", at: "right+10 center", using: function( position, feedback ) { $( this ).css( position ); $( "
" ) .addClass( "arrow" ) .addClass( feedback.vertical ) .addClass( feedback.horizontal ) .appendTo( this ); } } }); 

CSS：

 .ui-tooltip, .arrow:after { background: #fff; border: 1px solid #C90; } .ui-tooltip { padding: 10px 20px; border-radius: 20px; font: bold 14px "Helvetica Neue", Sans-Serif; text-transform: uppercase; box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; top: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { /*left: 20%;*/ } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; } 

Answer 1

您可以在尝试时使用jQuery UI position ， after伪元素after使用CSS3来设置顶部增量。

参考： https ： //developer.mozilla.org/en-US/docs/Web/CSS/ ：： after

码：

 .right .ui-tooltip-content::after { top: 47%; left: -10px; border-color: transparent #666; border-width: 10px 10px 10px 0; } .left .ui-tooltip-content::after { top: 47%; right: -10px; border-color: transparent #666; border-width: 10px 0 10px 10px; } 

演示： http ： //jsfiddle.net/IrvinDominin/6GfjC/

Answer 2

这个怎么样？

你真的过分了。 基本原理很容易学习。 你有一个白色的div与类.arrow ，第二个div旋转45度，这是一半隐藏的第一个。 根据隐藏的部分，您可以获得箭头。 在这种情况下，你必须隐藏第二个div右半部分以获得左箭头。