CODEWITHSUNDEEP
jqueryhtml
andys
andys

Reputation: 708

jquery on button click show tooltip above button

I need to show div above button on button click with 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

I need to make as a tooltip above the button.

Upvotes: 1

Views: 8497

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074038

I recommend taking an hour to read through the jQuery API documentation. It literally only takes that long, but pays off enormously.

Update

Your edit about making it a tooltip completely changes the question. You'd probably want to position the div using position: absolute and give it left and top coordinates relative to the button, like this:

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

Original answer:

The most obvious thing would be to change the markup so the div is in the right place to start with.

It's hard to tell what you're asking, but if you want to move #mydiv above #but:

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

Live Example | Source

But if you want to put it before the button but inside #but:

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

Live Example | Source

Upvotes: 6

Related Questions