<head>
<title>BubbleTip Demo</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="bubbletip/js/jQuery.bubbletip.js" type="text/javascript"></script>
<link href="bubbletip/js/bubbletip_sub/bubbletip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a, h4, li
{
font-family: Arial, Tahoma, Verdana;
}
pre.tip
{
margin: 0px;
padding: 5px;
font-size: 0.9em;
}
pre.code
{
margin: 0px;
padding: 20px;
border: solid 1px #CCC;
font-size: 1.0em;
}
em
{
font-size: 0.9em;
color: #777777;
}
</style>
<script type="text/javascript">
$(window).bind('load', function() {
$('#a1_right').bubbletip($('#tip1_right'), {
deltaDirection: 'right',
animationDuration: 100,
offsetRight: 20
});
$('#a2_right').bubbletip($('#tip2_right'), {
deltaDirection: 'right',
animationDuration: 100,
offsetRight: 20
});
});
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<a id="a1_right" href="#">to the right</a> <br>
<div id="tip1_right" style="display:none;">
<pre class="tip"> Hey, the test works! </pre>
</div>
<br>
<br>
<br>
<br>
<br>
<a id="a2_right" href="#">again?</a> <br>
<div id="tip2_right" style="display:none;">
<pre class="tip"> Hey, it worked again! </pre>
</div>
</body>
</html>
But I don't know how to populate either of the <a>'s with text from another page using AJAX.
Any help would be great!!!!
Thanks,
Bryan