jquery-ui - 将工具提示小部件中的箭头从底部移动到工具提示的左侧 (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)，但用于演示问题的代码也在下面。

第一个^st 框显示“箭头”方 block 的起始位置，第二个^nd 框显示围绕中心点的小旋转。您可以看到边缘已经被包含 block 的 overflow:hidden 剪掉了。第 3 个 ^rd 显示 45^o 旋转，这表明您遇到的问题。第4添加CSS将原点移动到0 25px，即x=0, y=25px即左下角, 所以你可以看到围绕这一点的小旋转看起来更好。第 5^th Pane 显示围绕修改后的原点的完整 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);
}

希望这有帮助:-)