i am using the js library qtip tooltip. I want to make the qtip tooltip move with my cursor as i hover over the hover row in a table. I know how to make my own tooltip move with my cursor but am struggling with qtip. Please explain the code it you answer. Thanks
My html:
<table>
<div id="hoverdiv"></div>
<tr class="hover" hovertext="Some text">
<td>Total Credits</td>
<td><%= @total_credit %></td>
</tr>
</table>
I can create a normal tooltip(without qtip js lib) to follow my cursor using the following jquery code
$(document).ready(function() {
$('.hover').mousemove(function(e) {
var hovertext = $(this).attr('hovertext');
$('#hoverdiv').text(hovertext).show();
$('#hoverdiv').css('top', e.clientY+10).css('left', e.clientX+10);
}).mouseout(function() {
$('#hoverdiv').hide();
});
});
And the code to display a static qtip tooltip:
$(document).ready(function() {
$('.hover').each(function() {
$(this).qtip({
content: $(this).attr('hovertext')
});
});
});
This is what i have tried so far:
$(document).ready(function() {
$('.hover').mousemove(function(e) {
$(this).qtip({
content: $(this).attr('hovertext')
});
$('').css('top', e.clientY+10).css('left', e.clientX+10);
});
});
According to the qTip docs:
When the position.target is set to mouse, this option determines whether the tooltip follows the mouse when hovering over the show.target.
Example:
$('.selector').qtip({
content: {
text: 'I follow the mouse whilst I\'m visible. Weeeeee!'
},
position: {
target: 'mouse',
adjust: {
mouse: true // Can be omitted (e.g. default behaviour)
}
}
});
And a jsFiddle example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With