cluetip not showing

cluetip not showing

Hello i am new to jquery. I am using cluetip in the following way

header.php

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/jquery.cluetip.js"></script>
<script type="text/javascript">
$(document).ready(function() {

  $('#area_convert_id').cluetip({
    splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: true // hide the clueTip's heading
  });
});
</script>
<link href="<?php bloginfo('template_directory'); ?>/library/css/jquery.cluetip.css" rel="stylesheet" type="text/css" />

property_detail.php

<a id="area_convert_id" href="#" title="Land Information|Houdini was an escape artist.|He was also adept at prestidigitation.">i</a>

but it is not showing. i am using wordpress. In core php it is showing. I don't understand why. Please help me