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

Question

我正在使用基于jquery ui 工具提示小部件“自定义样式”演示的语音气泡样式工具提示，但是当我需要将箭头显示在工具提示的左侧而不是顶部或底部时，我无法正确显示箭头。

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

<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。

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

第一个^框显示“箭头”方块的起始位置，第二个^框显示围绕中心点的小旋转。您可以看到边缘已经被包含块的overflow:hidden. 第三个^显示45 ^o旋转，这说明了您遇到的问题。第四^个添加 CSS 将原点移动到0 25px，即x=0, y=25px左下角，因此您可以看到围绕该点的小旋转看起来更好。第 5^个窗格显示围绕修改后的原点完整 45^度旋转。这看起来好多了，剩下要做的就是减小容器的宽度以剪掉右侧，留下一个向左的箭头。然后进行一些简单的 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 */
}

请参阅上述更改的演示

演示代码

为了完整起见，这里是生成上述图像的代码。通过更改Chrome DevTools中的旋转来实时查看正方形旋转，与演示进行交互非常有用。

超文本标记语言

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

希望这可以帮助 ：-）