2014-10-08 64 views
0

我有一个jQuery工具提示应该悬停在我的表格标题上。它显示在我的屏幕最左侧,没有格式 - 只是黑色的文字。我试图使用位置和位置jquery属性无济于事。代码:jQuery工具提示卡在页面左侧,对位置/位置没有反应

.container 
.row 
    .col-sm-12 
     %ol.breadcrumb 
      %li 
       = link_to 'Dashboard', dashboard_index_path 
      %li 
       = link_to 'Phase 3', phase_path(3) 
      %li 
       = link_to 'Step 1', phase_step_path(@phase, @step) 
      %li 
       Activity 3: Treatment Adaptations Table 
.row 
    .col-sm-12 
     %h1 
      Activity 3: Treatment Adaptations Table 


     %p 
      To review instructions, see 
      = link_to 'Phase 3 Step 1 guide', phase_step_path(@phase, @step) 
    %table.table.table-bordered 
     %thead 
      %th{"data-toggle" => "tooltip", "title" => "tooltip"} 
       Specify reason(s) for the adaptation 
      %th{"data-toggle" => "tooltip", "title" => "tooltip"} 
       Identify any specific concerns about the adaptation 
      %th{"data-toggle" => "tooltip", "title" => "tooltip"} 
       How will concerns be addressed? 
      %th{"data-toggle" => "tooltip", "title" => "tooltip"} 
       Specify how the adaptation will be made 
      %th{"data-toggle" => "tooltip", "title" => "tooltip"} 
       Who will carry out the adaptation? 

的jQuery:

$('[data-toggle="tooltip"]').tooltip({ 
    'placement': 'top' 
}); 

回答

0

如果你能发布的jsfiddle链接,它会更容易得到帮助。你的HAML文件可以编译成一些本地不易生成的html(没有所有这些变量)

+0

它似乎在我创建的jsfiddle中工作:http://jsfiddle.net/attgy27h/ 也许问题是由我的application.html.haml文件造成的?我可以看到,工具提示是在我的包装器和容器页面元素之后而不是内部创建的。 – 2014-10-08 23:30:04

+0

这很难猜出:)但这里是我如何调试它: 1.通过“触发器”:“点击”选项,使工具提示留在屏幕上; 2.工具提示是绝对定位的,因此请根据其“定位的”父节点(具有相对/绝对位置的节点)来检查它 3.背景颜色由引导程序定义: 'code .tooltip-inner {max35- :200px; padding:3px 8px; color:#fff; text-align:center; text-decoration:none; background-color:#000; border-radius:4px; } ' 祝你好运。 – 2014-10-09 22:41:29