本文介绍了更改jQuery工具提示箭头的位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将箭头的位置更改为靠近文本框的左侧.
我该如何解决?

我已经尝试过了:

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

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;
}
解决方案

您可以在尝试时使用jQuery UI position,并使用CSS3 after伪元素设置顶部增量.

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::之后

代码:

.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/

I am trying to change the position of arrow to left near text box.
how can i fix this ??

I have tried this:

Working Example link :http://jsfiddle.net/b8fcg/

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;
}
解决方案

You can use jQuery UI position as you tried and CSS3 after pseudo element to set a top delta.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Code:

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

Demo: http://jsfiddle.net/IrvinDominin/6GfjC/

这篇关于更改jQuery工具提示箭头的位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-17 23:54
查看更多