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

时间:2012-12-15 11:07:04

标签: jquery html

我需要在点击按钮时使用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>

更新

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

1 个答案:

答案 0 :(得分:5)

我建议您花一小时阅读jQuery API documentation。它实际上只花了那么长时间,但收获颇丰。

<强>更新

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

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

Live Example | Source


原始回答

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

很难说出你在问什么,但如果你想将#mydiv移到#but之上:

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

Live Example | Source

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

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

Live Example | Source