Question

我有一个按钮。单击此按钮，我想在按钮的右侧显示div，就像工具提示一样。

此按钮可以位于屏幕上的任何位置。如何在右边和右边显示它让它响应？

CSS

.tooltip {
    background-color: red;
    background-color:#EDEDED;
    /*background color of tooltip*/
    border:1px solid black;
    position:absolute;
    top:50px;
    z-index:100;
    line-height:1.3em;
    padding:8px;
    width:200px;
    /*default width of tooltip*/
    border-radius:8px;
    /*CSS3 border radius*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 0 10px #888888;
    /*CSS3 shadow*/
    -moz-box-shadow:0 0 10px #888888;
    -webkit-box-shadow:0 0 10px #888888;
}

Answer 1

Reponsive有点棘手，但这会将您的工具提示放在按钮的左侧（现在尽可能动态）：

Fiddle Demo

$('#tooltip').click(function () {
    var objButton = $(this);
    var objTooltip = objButton.next();
    var objPosition = objButton.position();
    // Left adds width + padding + offset
    $(".tooltip").css({"top" : objPosition.top, "left" : (objButton.width() + 26) + 'px'}).toggle();
});

Answer 2

正如亚历克斯所说，让它变得敏感将是棘手的。但作为替代方案，根据设备的尺寸，您可以将工具尖端放在右侧或底部。因此，要在右侧显示它，您可以使用如下：

.tooltip {
   background-color:#EDEDED;
   border:1px solid black;
   border-radius: 3px 3px 3px 3px;
   margin-left: 8px;
   padding: 1px 6px;    
   z-index: 999;
   position: absolute;
   display: none;
}

DEMO

使用上面的示例，即使您在按钮之前添加文本，工具提示也会正确对齐。

响应式工具提示Css

2 个答案: