使用箭头背景颜色在控件右端显示工具提示

Question

如何使用箭头朝向控制器的右端显示工具提示到控制权的右端，并将箭头的背景颜色更改为红色？

This is what I tried

<input id="age" title="test tooltip">
 $( document ).tooltip({
      position: {
        my: "right bottom-20",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
    });
 .ui-tooltip, .arrow:after {
    background: black;
     }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;    
    font: bold 14px "Helvetica Neue", Sans-Serif;

  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 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;

    -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

修改

所以，你想要这个：

首先，摆脱你的.arrow课程，并将其添加到你的CSS中：

.ui-tooltip-content::after {
    top: calc(50% - 10px); /* Calculates the half height minus 10px */
    left: -10px;
    border-color: transparent red;
    border-width: 10px 10px 10px 0;
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

然后，要将工具提示置于右侧，请在JS中使用它：

position: {          
   my: 'right center', 
   at: 'left-10 center'
   ...
}

Here's a demo to play with

关于calc()：允许长度单位计算值的方法，即宽度：计算（100％ - 3em）

It's supported in major desktop browser.

---

旧答案（接受后将删除）

我认为这是你想要实现的目标：

更改您的Javascript位置：

position: {
    my: "left bottom-20",
    at: "center top",
    ...

对于红色箭头，请在CSS中添加：

.arrow:after{
    background:red;
}

Answer 2

.arrow:after {
  content: "";
  height: 45px;
  left: 62px;
  position: absolute;
  transform: rotate(45deg);
  width: 81px;
}
.arrow.top {
  bottom: -1px;
}
.arrow.left {
  left: -21%;
}

Answer 3

这有点棘手，因为Jquery UI在后台做了很多工作来尝试定位工具提示。

查看我的小提琴： http://jsfiddle.net/pa5N8/1/

我已修改.arrow.left类以使用css边框显示左向箭头，并将其正确定位到输入字段墙的中心。

如果您的输入字段具有一致的宽度和高度，这是理想的选择。否则，我建议使用不同的库，如tipsy：http://onehackoranother.com/projects/jquery/tipsy/

祝你好运！