Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
Controlling jQuery's Tooltip
Posted on 07/25/2014 at 09:40 am by Kevin Wentworth
Viewed 8,955 times | 0 comments
After watching jQuery's tooltip()
slow down a page's loading time by a solid two seconds, it became clear that there had to be a better way to create and control tooltips.
The Slow Way
The initial use of tooltip()
was used to create all of the tooltips on page generation, as such...
- $(".tooltip").tooltip({
- position: {
- my: "center bottom-20",
- at: "center top",
- using: function( position, feedback ) {
- $( this ).css( position );
- $( "<div>" )
- .addClass( "arrow" )
- .addClass( feedback.vertical )
- .addClass( feedback.horizontal )
- .appendTo( this );
- }
- }
- });
Using this, if a page has, say, 200 tooltips being generated all at once, guess what? Slow loading all around! Now, what if we were to create the tooltip by hovering the tooltip element, and then destroying it when you stop hovering it?
The Fast Way
Using jQuery's hoverIntent
listener, we can control how tooltips are generated and listed, as such...
- $(".tooltip").hoverIntent({
- over: function(){
- // On mouseenter
- $(this).tooltip({
- position: {
- my: "center bottom-20",
- at: "center top",
- using: function( position, feedback ) {
- $( this ).css( position );
- $( "<div>" )
- .addClass( "arrow" )
- .addClass( feedback.vertical )
- .addClass( feedback.horizontal )
- .appendTo( this );
- }
- }
- });
- // Generate tooltip, then open it.
- $(this).tooltip("open");
- },
- out: function(){
- // On mouseleave
- $(this).tooltip("close", function(){
- // Wait to close, then destroy instance
- $(this).tooltip("destroy");
- });
- },
- });
Now, instead of creating and leaving every tooltip on page generation, the tooltips are generated on hover of the tooltip element, then deleted when you leave the element.
Hooray! Faster loading times!
Good Luck, Fellow Programmers.
Tags for Controlling jQuery's Tooltip
Jquery | Tutorial | Web Programming
Comments for this Posting
No comments. Be the first to post a reply.
Sorry, comments are closed for this posting.
Please Email Kevin if you have any questions. Thanks!