在工具提示小部件中将箭头从工具提示的底部移动到左侧（jQuery UI 1.9）

Question

我正在使用基于jquery ui tooltip widget 'Custom Styling' demo的语音气泡样式工具提示，但是当我在工具提示的左侧而不是顶部或底部需要时，我无法正确显示箭头。

有人可以帮我修复此代码（它会切断提示并显示太大的箭头部分）吗？

<style type="text/css"> 

   .ui-tooltip.menu_info {
        max-width: 200px;
    }      
* html .ui-tooltip {
    background-image: none;
}
body .ui-tooltip { border-width: 1px; }
    .ui-tooltip, .arrow:after, .arrow_left_side:after {
        background: white;
        border: 1px solid #999;       

    }       
    .ui-tooltip {
        padding: 10px 12px;
        color: Black;
        font: 8pt "Helvetica Neue", Sans-Serif;   
        max-width: 150px;
        border: 1px solid #999;
    position: absolute;
    }           
    .arrow_left_side {       
        height: 70px;
        width: 8px;    
        overflow: hidden;
        position: absolute;
        top: 0px;
        margin-top: 5px;
        left: -8px;
    }   
    .arrow_left_side:after {
        content: "";
        position: absolute;
        width: 25px;    height: 25px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        tranform: rotate(45deg);
    }
     </style>   
 <script>
$(function() {
    $('.menu_info').tooltip({
        position: {
            my: "left+20 center",
            at: "right center",
            using: function (position, feedback) {
                $(this).css(position);
                $("<div>")
                        .addClass("arrow_left_side")
                        .addClass(feedback.vertical)
                        .addClass(feedback.horizontal)
                        .appendTo(this);
            }
        }
    });
});
</script>

Answer 1

问题描述

问题是由CSS转换和overflow:hidden的组合引起的。 箭头实际上是一个宽度和高度为45 ^o 的正方形。旋转的默认原点是50% 50%或center center，这会导致“箭头”方块围绕中间旋转，从而导致边缘被overflow属性剪切。

它最好显示为图像或a demo（仅限Webkit），但用于演示问题的代码也在下面。

1 ^st 框显示“箭头”方块的起始位置，2 ^nd 框显示围绕中心点的小旋转。您可以看到包含块的overflow:hidden已经剪切了边缘。 3 ^rd 显示45 ^o 旋转，这表明你有问题。 4 ^th 添加CSS以将原点移动到0 25px，即左下角的x=0, y=25px，因此您可以看到围绕此点的小旋转正在寻找更好。 5 ^th 窗格显示围绕修改原点的完整45 ^o 旋转。这看起来要好得多，剩下要做的就是减小容器的宽度以剪掉右侧，留下左侧箭头。然后是一些简单的CSS定位，将其移动到工具提示内容旁边。

解决方案

CSS所需的修改是容器上的小定位更改以及为旋转添加原点。我在上面的描述中意识到我说的是0 25px的原点，但实际上箭头仍然被剪裁在左侧，所以我将原点移到了5px 25px。

.arrow_left_side {       
    margin-top: -5px;
    left: -10px;
}   
.arrow_left_side:after {
    -webkit-transform-origin: 5px 25px;
    /* for brevity, I have not added all the different browser prefix versions of transform-origin. If you need cross browser support, you will need to add these here */
}

See demo上述更改

演示代码

为了完整性，这里是生成上述图像的代码。通过更改Chrome DevTools中的旋转来实时旋转，可以与演示进行交互。

HTML 的

<div class="original"></div>
<div class="original-rotated-a-little"></div>
<div class="original-rotated-forty-five"></div>
<div class="original-with-transform-origin-rotated-a-little"></div>
<div class="original-with-transform-origin-rotated-forty-five"></div>

CSS

body {
    margin-left:50px
}
div {
    position:relative;
    height: 50px;
    width: 35px;    
    overflow: hidden;
    top: 0px;
    margin-top: 5px;
    left: -8px;
    border:1px dashed red;
}   
div:after {
    content: "";
    position: absolute;
    border: 1px solid #999;
    width: 25px;
    height: 25px;
}
div.original-rotated-a-little:after {
    -webkit-transform: rotate(15deg);
}
div.original-rotated-forty-five:after {
    -webkit-transform: rotate(45deg);
}
div.original-with-transform-origin-rotated-a-little:after {
    -webkit-transform-origin: 5px 25px;
    -webkit-transform: rotate(15deg);
}
div.original-with-transform-origin-rotated-forty-five:after {
    -webkit-transform-origin: 5px 25px;
    -webkit-transform: rotate(45deg);
}

希望这会有所帮助： - ）