1

我正在使用基于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>
4

1 回答 1

4

问题描述

该问题是由 CSS 转换和overflow:hidden. 箭头实际上是一个正方形，其宽度和高度旋转了45度。旋转的默认原点是50% 50%或center center导致“箭头”正方形围绕中间旋转，从而导致边缘被overflow属性剪裁。

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

CSS 旋转示例

第一个框显示“箭头”方块的起始位置，第二个框显示围绕中心点的小旋转。您可以看到边缘已被包含块的overflow:hidden. 第三个显示了 45 o旋转，这表明了您遇到的问题。第 4个添加 CSS 将原点移动到0 25px，也就是x=0, y=25px左下角，所以你可以看到围绕这个点的小旋转看起来更好。第 5窗格显示完整的 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 */
}

请参阅上述更改的演示

演示代码

为了完整起见，这里是生成上述图像的代码。通过更改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);
}

希望这可以帮助 ：-）

于 2013-03-08T00:42:47.257 回答