Display info from database dynamically on-hover bubbletip

58 views
Skip to first unread message

Frankie N

unread,
Jun 10, 2010, 3:02:29 PM6/10/10
to bubbletip
Is it possible to use the bubbletip plugin in this situation:

When the user hover's over and/or click's something on a row, data is
retrieved from the database
and displayed in the bubbletip?

Is this supported?

If so, can you provide an example of how to do this?

Thanks,

Frankie

uhleeka

unread,
Jun 10, 2010, 6:04:00 PM6/10/10
to bubbletip
Frankie,

You could fire an ajax request to retrieve the data from your database
into your tip. On success (of the ajax query) you could then trigger
your bubbletip to show. It should work as long as you set the
bubbletip option.calculateOnShow = true.

Hope that points you in the right direction!

bpdavi...@gmail.com

unread,
Jun 17, 2013, 4:05:43 PM6/17/13
to bubb...@googlegroups.com
Uhleeka,

Could you post an example?

I'm using the bubbletip like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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
Reply all
Reply to author
Forward
0 new messages