found pretty interesting question @ http://jsfiddle.net/ttfyc/15/ , decided incorporate project.
however, after following every code in line (even copy/paste), tooltip not showing up. demonstrated code below, every line identical jsfiddle. 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 text $('.mastertooltip').hover(function(){ // hover on 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; }
you running conflict bootstrap or other framework defines tooltip class. rename class in js , css , work fine.
Comments
Post a Comment