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

我正在尝试将箭头的位置更改为靠近文本框的左侧。
我该如何解决这个问题？更改jQuery工具提示的位置箭头

我已经试过这样：

HTML：

<input id="test" title="We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes." />

的Javascript：

$('input').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); 
     } 
    } 
});

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; 
}

来源

2013-09-25 Kango

当你试图将其移动到 – Itay

在课堂上箭头：后却没有得到如何ratate这一点。 – Kango

你正在做这件事。阅读这篇文章http://www.sitepoint.com/pure-css3-speech-bubbles/ – Itay

this怎么样？

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

来源

2013-09-25 11:51:01

您可以像尝试使用jQuery UI position一样使用CSS3 after伪元素来设置顶端三角洲。

编号：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/

来源

2013-09-25 14:21:52

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

回答

相关问题