我正在使用js库qtip工具提示.当我将鼠标悬停在表格中的悬停行上时,我想用我的光标移动qtip工具提示.我知道如何使用我的光标使我自己的工具提示移动,但我正在努力与qtip.请解释你回答的代码.谢谢
我的HTML：
- <table>
- <div id="hoverdiv"></div>
- <tr class="hover" hovertext="Some text">
- <td>Total Credits</td>
- <td><%= @total_credit %></td>
- </tr>
- </table>
我可以使用以下jquery代码创建一个普通的工具提示(没有qtip js lib)来跟踪我的光标
- $(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();
- });
- });
- $(document).ready(function() {
- $('.hover').each(function() {
- $(this).qtip({
- content: $(this).attr('hovertext')
- });
- });
- });
这是我到目前为止所尝试的：
- $(document).ready(function() {
- $('.hover').mousemove(function(e) {
- $(this).qtip({
- content: $(this).attr('hovertext')
- });
- $('').css('top',e.clientX+10);
- });
- });
解决方法
根据
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.
例：
- $('.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)
- }
- }
- });
而且是jsFiddle example.
