jquery - jquery on button click 在按钮上方显示工具提示

Question

我需要在使用 jquery 的按钮单击时在按钮上方显示 div。

$("#but button").click(function(){
    $("#mydiv").css("display","block");
    });

<div id="but"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display: none;">The div must be above button</div>

更新

我需要在按钮上方制作一个工具提示。

Answer 1

我建议花一个小时通读jQuery API 文档。从字面上看，它只需要那么长时间，但回报巨大。

更新

您关于使其成为工具提示的编辑完全改变了问题。您可能希望使用 div 定位position: absolute并为其提供相对于按钮的坐标，如下所示left：top

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left + 10,
    "top":  pos.top - div.height() - 10
  });
});

实例| 资源

---

原始答案：

最明显的事情是更改标记，以便 div 位于正确的开始位置。

很难说出你在问什么，但如果你想#mydiv超越#but：

$("#but button").click(function(){
    $("#mydiv").css("display","block").insertBefore("#but");
});

实例| 资源

但是如果你想把它放在按钮之前但里面#but：

$("#but button").click(function(){
    $("#mydiv").css("display","block").insertBefore(this);
});

实例| 资源