按钮上的jquery单击按钮上方显示工具提示

Question

我需要在按钮点击按钮上方显示div以及jquery.

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

UPDATE

我需要在按钮上方作为工具提示.

Answer 1

我建议花一个小时来阅读jQuery API文档.它实际上只需要很长时间,但是可以获得巨大回报.

更新

关于使其成为工具提示的编辑完全改变了问题.你可能想要使用div来定位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);
});

实例 | 资源