jquery - Javascript Tooltip hover and click -

-

i need tooltip in javascript. code have below works on hover, can't put function outside can called click. in function there stuff calculating tooltip position , way appears, , works.

thank help.

var targets = $( '[rel~=tooltip]' ),     target  = false,     tooltip = false,     title   = false;  targets.on( 'mouseenter', function() {     target  = $( );     tip     = target.attr( 'title' );     tooltip = $( '<div id="tooltip"></div>' );        if( !tip ) {         return false;     }      target.removeattr( 'title' );     tooltip.css( 'opacity', 0 )            .html( tip )            .appendto( 'body' );      var init_tooltip = function()     {         containerlist = $('.container').find('.listimages');          if( containerlist.width() < tooltip.outerwidth() * 1.5 )             tooltip.css( 'max-width', containerlist.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 + target.outerheight(),             pos_right = target.offset().right + ( target.outerwidth() / 2 ) - ( tooltip.outerwidth() / 2 );              console.log(pos_right)          if( pos_left < containerlist.offset().left )         {             pos_left = target.offset().left;             tooltip.addclass( 'left' );         }         else {             tooltip.removeclass( 'left' );         }          if( pos_left + tooltip.outerwidth() > containerlist.offset().left + containerlist.width() )         {             pos_left = target.offset().left - tooltip.outerwidth() + target.outerwidth();             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()         {             $( ).remove();         });          target.attr( 'title', tip );     };        target.bind( 'mouseleave', remove_tooltip );  });

i created fiddle based off of provided in question: http://jsfiddle.net/r26ba/1/

however, because don't have full implementation of page it's more theory based being usable within fiddle.

essentially have done created tooltip object:

function tooltip(el) {     //... }

which has prototype methods create, position, , destroy. created custom binding created , destroyed tooltips based on mouseevents:

$('[rel~=tooltip][title]').on({     'tooltip.create': function() {         $(this).trigger('tooltip.destroy');          activetooltip = new tooltip(this);     },     'tooltip.destroy': function() {         if(activetooltip) {             activetooltip.destroy();         }     },     'mouseenter': function() {         $(this).trigger('tooltip.create');     },     'mouseleave': function() {         $(this).trigger('tooltip.destroy');     },     'click': function(e) {         e.stoppropagation();          if(activetooltip && activetooltip.el == this) {             $(this).trigger('tooltip.destroy');         } else {             $(this).trigger('tooltip.create');         }     } });  $(document.body).on('click', function() {     if(activetooltip) {         activetooltip.destroy();     } });  $(window).on('resize', function() {     if(activetooltip) {         activetooltip.position();     } });

also, side note: may notice cleaned lot of outerwidth/height , offset calls. these functions can expensive (performance wise) call, want keep eye out number of times have use them.

side note 2: may want use resizeend event plugin jquery. throttle amount of calls position method , boost overall performance.

side note 3: laughing @ myself because went effort , realized...how going click on element without causing mouseenter event fire?


Comments

Post a Comment

Popular posts from this blog

java - Run a .jar on Heroku -

-
i trying run .jar file on heroku, , can't find instructions anywhere on how this. have read wants me compile uploading heroku. possible, , if is, how this? if helps, trying run minecraft craftbukkit server, , don't have pom.xml file yet. you didn't provide details i'll try give , people reaches question way it. first of all, create heroku account , create heroku application (assumed have done that). second, need generate application jar , upload heroku. so, open terminal , install heroku cli (assuming unix terminal): $ sudo npm install -g heroku-cli you need have npm , nodejs installed, can check link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04 once done that, can use npm update node version acceptable heroku-cli: $ sudo npm install -g n $ sudo n 7.10.0 and run: $ sudo npm install -g heroku-cli in order deploy jars, need install deploy plugin: $ sudo heroku plugins:install heroku-cli-deploy ...
Read more

java - Jtable duplicate Rows -

-
Image
when add new rows in jtable duplicate rows many times this method update jtable public final void tableaucomande(){ ((defaulttablemodel)tabcommande.getmodel()).getdatavector().clear(); session s=hibernateutil.getsessionfactory().opensession(); criteria cr1= s.createcriteria(commande.class); list <commande> lcs=cr1.list() ; criteria cr2= s.createcriteria(lignecommande.class); list <lignecommande> lck=cr2.list() ; if(lcs.size()!=0 && lck.size()!=0) { (commande lc:lcs) { for(lignecommande lig:lck){ ((defaulttablemodel)tabcommande.getmodel()).addrow(new object[]{ lc.getid_cmd(),lc.getnumcmd(),lc.getdate_cmd(),lc.getclient().getnomprenom(), lig.getproduit().getlib_prd(),lig.getquantite(),lig.getproduit().getid_prd() }); } } // tabcommande.setrowselectioninterval(tabcommande.getrowcount()-1,tabcommande.getrowcount()-1); } } this code add add data rows displaye...
Read more

validation - How to pass paramaters like unix into windows batch file -

-
i need pass various parameters .cmd file unix format file.cmd -configuration=value -source=value -flag but, try this: startlocal @echo off cls setlocal set cmdline=%* set configuration= set source= set badargs= set validation= goto main :splitargs echo splitargs(%*) if "%*" neq "" ( /f "tokens=1,2,* delims== " %%i in ("%*") call :assignkeyvalue %%i %%j & call :splitargs %%k ) goto :eof :assignkeyvalue echo assignkeyvalue(%1, %2) if /i %1==-configuration ( set configuration=%2 ) else if /i %1==-source ( set source=%2 ) else ( rem append unrecognised [key,value] badargs echo unknown key %1 set badargs=%badargs%[%1, %2] ) goto :eof :validate echo validating set validation=fail if defined configuration ( echo -configuration ok if defined source ( echo -source ok if not defined badargs ( set validation=success ) ) ) goto :eof :main cl...
Read more