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;
}
3
  • Are you certain your JS and CSS are both getting included in your application? Jul 9, 2015 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! Jul 9, 2015 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. Jul 9, 2015 at 20:41

1 Answer 1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.