Layout disrupted by tooltip

[makamo66]

<div class="default-btn-1"></div>
<button type="submit" value="0" id="default-btn-1" class="btn btn-default btn-default-1 btn-sm">
Remove Student
</button>

$("#default-btn-1").hover(function() {
var txt3 = "All information on this course will be lost. ";
var newDiv3 = $('<div style=\"position: relative; top: 200px; right: 200px; background-color: #444; padding: 6px; width: 180px; height: 60px; color: #fff;\"></div>').text(txt3);
$('.default-btn-1').append(newDiv3);
});

I have this code on my website and there is a problem with it. when I hover over the button the div moves the button down and disrupts the flow of the page. How can I get it to stay on top of the button and not move it down?

 

[ChrisHirst]

use fixed positioning and a high z-index to put it into a higher plane above the elements in the document flow

http://webmaster-talk.eu/articles/8-website-development-and-design/13-css-positioning

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum