在rails中显示使用jquery的工具提示

问题描述：

在http://jsfiddle.net/tTFYC/15/处发现了一个非常有趣的问题，所以我决定将它合并到我的项目中。在rails中显示使用jquery的工具提示

但是，在按照行中的每个代码（甚至复制/粘贴）之后，工具提示未显示出来。正如下面的代码所展示的，几乎每一行都与jsfiddle相同。我在这里做错了什么？

HAML

%p.mastertooltip.add_stuff#add_trip= link_to ........

//= require jquery 
//= require bootstrap-sprockets 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 
$(document).ready(function() { 
     // Tooltip only Text 
     $('.mastertooltip').hover(function(){ 
       // Hover over code 
       var title = "hello world"; 
       $(this).data('tipText', title).removeAttr('title'); 
       $('<p class="tooltip"></p>') 
       .text(title) 
       .appendTo('body') 
       .fadeIn('slow'); 
     }, function() { 
       // Hover out code 
       $('.tooltip').remove(); 
     }).mousemove(function(e) { 
       var mousex = e.pageX + 20; //Get X coordinates 
       var mousey = e.pageY + 10; //Get Y coordinates 
       $('.tooltip') 
       .css({ top: mousey, left: mousex }) 
     }); 
});

CSS

.tooltip { 
    display:none; 
    position:absolute; 
    border:1px solid #333; 
    background-color:#161616; 
    border-radius:5px; 
    padding:10px; 
    color:#fff; 
    font-size:12px Arial; 
}

你确定你的JS和CSS都包含在你的应用程序中吗？ –

是的，我做了一些虚拟测试的JS和它的工作（追加一些****悬停文字）。 CSS绝对包括在内！ – user3277633

你应该发布你的JS清单文件。也许jQuery没有被正确包含。另外，请标记您的文章与RoR版本号，因为这可能会影响SO社区的答案。 –

答

您正在运行与引导或其他一些框架，还定义了tooltip类的冲突。只需在JS和CSS中重命名该类，它就可以正常工作。

哇，你是神奇的。谢谢！ – user3277633

在rails中显示使用jquery的工具提示

相关推荐