1

Found a pretty interesting question at http://jsfiddle.net/tTFYC/15/ , so I decided to incorporate it into my project.

However, after following every code in the line (even copy/paste), the tooltip is not showing up. As demonstrated by the code below, almost every line is identical to the jsfiddle. What am I doing wrong here?

HAML 

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

JS

//= 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;
}
user3277633
  • 1,891
  • 6
  • 28
  • 48
  • Are you certain your JS and CSS are both getting included in your application? – steve klein Jul 09 '15 at 20:30
  • Yeah, I did some dummy test for the JS and it's working (append some **** to the text on hover). the CSS is definitely included! – user3277633 Jul 09 '15 at 20:32
  • You should probably post your JS manifest file. Maybe jQuery is not getting included properly. Also please tag your post with RoR version number as that may impact answers from SO community. – steve klein Jul 09 '15 at 20:41

1 Answers1

3

You are running into a conflict with Bootstrap or some other framework that also defines the tooltip class. Just rename that class in your JS and CSS and it will work fine.

cmoran92
  • 290
  • 2
  • 7