响应式工具提示Css

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

响应有点棘手，但这将把您的工具提示放置在按钮的左侧(目前尽可能动态地):

小提琴演示

$('#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

正如Alex所提到的，让它具有响应性是很棘手的。但是，根据设备的大小，你可以选择将工具提示放在右侧或底部。因此，要将其显示在右侧，可以使用如下命令:

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

演示在上面的例子中，即使在按钮前添加了文本，工具提示也会正确对齐。