jquery on button點擊顯示按鈕上方的工具提示

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 documentation閱讀。它從字面上來說只需要很長時間，但是收益巨大。

更新

您對使它成爲一個提示完全改變的問題編輯。你可能會想使用position: absolute定位div和給它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 
    }); 
}); 

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