Last active
August 27, 2018 00:13
-
-
Save JacobBennett/db69d138a335db2d4660 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( function() | |
| { | |
| var targets = $( '[rel~=tooltip]' ), | |
| target = false, | |
| tooltip = false, | |
| title = false; | |
| targets.bind( 'mouseenter', function() | |
| { | |
| target = $( this ); | |
| tip = target.attr( 'title' ); | |
| tooltip = $( '<div id="tooltip"></div>' ); | |
| if( !tip || tip == '' ) | |
| return false; | |
| target.removeAttr( 'title' ); | |
| tooltip.css( 'opacity', 0 ) | |
| .html( tip ) | |
| .appendTo( 'body' ); | |
| var init_tooltip = function() | |
| { | |
| if( $( window ).width() < tooltip.outerWidth() * 1.5 ) | |
| tooltip.css( 'max-width', $( window ).width() / 2 ); | |
| else | |
| tooltip.css( 'max-width', 340 ); | |
| var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ), | |
| pos_top = target.offset().top - tooltip.outerHeight() - 20; | |
| if( pos_left < 0 ) | |
| { | |
| pos_left = target.offset().left + target.outerWidth() / 2 - 20; | |
| tooltip.addClass( 'left' ); | |
| } | |
| else | |
| tooltip.removeClass( 'left' ); | |
| if( pos_left + tooltip.outerWidth() > $( window ).width() ) | |
| { | |
| pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20; | |
| tooltip.addClass( 'right' ); | |
| } | |
| else | |
| tooltip.removeClass( 'right' ); | |
| if( pos_top < 0 ) | |
| { | |
| var pos_top = target.offset().top + target.outerHeight(); | |
| tooltip.addClass( 'top' ); | |
| } | |
| else | |
| tooltip.removeClass( 'top' ); | |
| tooltip.css( { left: pos_left, top: pos_top } ) | |
| .animate( { top: '+=10', opacity: 1 }, 50 ); | |
| }; | |
| init_tooltip(); | |
| $( window ).resize( init_tooltip ); | |
| var remove_tooltip = function() | |
| { | |
| tooltip.animate( { top: '-=10', opacity: 0 }, 50, function() | |
| { | |
| $( this ).remove(); | |
| }); | |
| target.attr( 'title', tip ); | |
| }; | |
| target.bind( 'mouseleave', remove_tooltip ); | |
| tooltip.bind( 'click', remove_tooltip ); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi. Is there a way to have the tooltips work on touch devices? They show up but would rather you can tap anywhere for the tooltip to disappear rather than on the tooltip itself.