javascript - 响应式工具提示 Css

Question

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

这个按钮可以在屏幕上的任何地方。如何在右侧显示并使其响应？

DEMO

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

响应式有点棘手，但这会将您的工具提示定位到按钮的左侧(目前尽可能动态):

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