更改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工具提示的位置箭頭

回答

相關問題