Tool Tip widget always displays outside <div id="wrapper">

Tool Tip widget always displays outside <div id="wrapper">

5 day old newbie here ...

regardless of wrapper height (& width) the UI Tool Tip always appears outside the wrapper div.  How do I get it close to the object whose title appears in the Tool Tip.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ToolTip Dev</title>

<link rel="stylesheet" href=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <!--   jQuery-UI lib   -->

<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!--   base jQuery lib   -->
<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <!--   jQuery-UI lib   -->

<style>
h1{text-align:center;
}

.btn{margin:20px auto 20px;
}

</style>
</head>

<body>

<div id='wrapper'>

<h1>Tool Tip Dev</h1>

<button id='getData'
        class='btn'
        type='button'
        title="This is the button's title">Get data</button>


</div>

<script type='text/javascript'>
$("document").ready(function() {

  $("#wrapper").css("width",500);
  $("#wrapper").css("margin", "auto");
  $("#wrapper").css("background-color", "#ddd");

  $( document ).tooltip();
});
</script>
</body>
</html>