Detect Phones / Tablets

Hi, Do you know how I can detect any "touch device" to dequeue_components tooltip when is such ?

Hey Olivier,

Well you could potentially use wp_is_mobile() to check if the user is on mobile and enqueue the Tooltip component only if it is not the case. That said it won't check for the touch devices but mobile only.

Personnally I would to it using Javascript which is more solid as it won't break on device which are mixed "desktop/table". I put together a quick example snippet for you:

( function( $ ) {
 $( document ).ready( function() {
   var tooltipDisabled = false;

    var toogleTooltip = function( disableTooltips ) {
     if ( ( disableTooltips && tooltipDisabled ) || ( ! disableTooltips && ! tooltipDisabled ) ) {
       return;
     }

     var currentSuffix = disableTooltips ? '' : '-off',
        newSuffix     = disableTooltips ? '-off' : '';

      $( '[data-uk-tooltip]' ).each( function() {
       var attr = $( this ).attr( 'data-uk-tooltip' + currentSuffix );

       $( this ).removeAttr( 'data-uk-tooltip' + currentSuffix ).attr( 'data-uk-tooltip' + newSuffix, attr );
      } );

      tooltipDisabled = disableTooltips;
    };

    // Remove all tootips on touch.
   $( '[data-uk-tooltip]' ).on( 'touchstart', function( e ) {
      toogleTooltip( true );
    } );

    // Re-add all tootips on hover for devices which support it.
    $( '[data-uk-tooltip]' ).on( 'hover', function( e ) {
     toogleTooltip( false );
   } );
  } );
} )( jQuery );

Hope that helps,

Hey Thierry, fantastic! thanks a lot.

I did it this way:

beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/lib/assets/js/disableTooltips.js', 'js' );

Does the compiler ID important? Should I replace it with 'disableTooltips' for example? Is this the correct way to run it?

Hey Oliver,

Yes it is the correct way to do it and yes the compiler ID is important as it is what tell Beans to add it to the UIkit compiled file which is the only compiler loading by default 🙂

If I were to give a very basic example, the easiest way is to create a site.js file in your child theme and add it to the compiler as such:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {
  beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/site.js', 'js' );
}

Note that if you already have a beans_uikit_enqueue_scripts callback function in your child theme, you may just add beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/site.js', 'js' ); in that function.

You may organize you files differently like in your code the JS file looks like it is in child-theme/lib/assets/js/ which is perfect too 🙂

Happy coding,

Ok, thank you for your time. About beans_uikit_enqueue_scripts we'll see us there, if you don't mind.

My pleasure 😉