使用Qtip进行带剔除的工具提示 [英] Using Qtip for tool tip with knockout

问题描述

我需要为表格中的特定列提供工具提示. 我的看法:

I need to provide a tool tip for a particular column in my table. My View:

<table class="tbl" id="dash" data-bind="with: Plan">
      <thead>
        <tr class="tag close">
          <th>Type</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody class="scrollContent" data-bind="foreach: Course">
        <tr>
          <td><i class="icon"></i></td>
          <td><a href="#" id="qtipselector_01" data-bind="text: Title"></a></td>
          <div id="TooltipContent_01" class="hidden">
            <a> Test Tool Tip</a>                 
          </div>
      </div>
    </tr> 
  </tbody>
 </table>

我已经包含了jquery和jquery.qtip.js.

I have included jquery and jquery.qtip.js.

我编写了一个函数来显示鼠标输入时的工具提示.

I have written a function to show the tool tip on mouse enter.

 $('#qtipselector_01').qtip({
    content: $('div#TooltipContent_01').html(),
    position: {
        my: 'left center'
    },
    show: 'mouseenter',
        hide: {
            fixed: true,
            delay: 500,            
            when: {
                event: 'unfocus'
            }
        },
    style: {
        tip: {
          width: 20,
          height: 14,
        },
        width:280,
        height:100,    
        classes: 'qtipabc',        
    }
});

主页

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<!--Template binding--><!-- This is where my view is getting binded--> 
<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                  
</div>
<script src="Scripts/abc.js"></script> <!--Place where .qtip is called-->

目前无法正常工作.

推荐答案

$(document).ready(function(){
$('#qtipselector_01').qtip({
    content: $('div#TooltipContent_01').html(),
    position: {
        my: 'left center'
    },
    show: 'mouseenter',
        hide: {
            fixed: true,
            delay: 500,            
            when: {
                event: 'unfocus'
            }
        },
    style: {
        tip: {
          width: 20,
          height: 14
        },
        width:280,
        height:100,    
        classes: 'qtipabc'       
    }
});


});

您应该将qTip代码放在$(document).ready块中.另外，您在其中可能会混入一些多余的逗号

You should place your qTip code within a $(document).ready block. Also, you have some extra commas in there that can interfere

这篇关于使用Qtip进行带剔除的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！