Positioning tooltips accurately

One of the most useful features of jQuery UI's tooltips is the ability to fine-tune where they appear on screen. There may be instances where you need them to appear, but not at the expense of hiding an important feature on your website or application! Let's have a look at how the position attribute works, using a custom styled tooltip with pointer as an example.

In your text editor, alter the final <script> block of tooltip4.html, as shown in the following code:

<script>
  $(document).ready(function($){
    $('a').tooltip({
      position: { 
        my: 'center+30 bottom', 
        at: 'center top-8',
        of: '#tip'
      }
    });                  
    $('a').tooltip('option', 'tooltipClass', 'top');
  });  
</script>        

We need to alter the markup so it includes the selector ID we've just referenced in the tooltip call:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi quis imperdiet semper. Fusce...