Mostrar tooltip del texto si no cabe en una linea

Cortar los textos que sobre pasan una linea pero mostrar el texto completo en tooltip.

Ejemplo para sidebar widget Recent Posts

En style.css:

#recent-posts-2 > ul > li a {
    display:inline-block;
    width:300px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}


[role="tooltip"]{
    visibility: hidden;
}

 

En plugin o functions.php:

Incluir las dependencias kendoTooltip.

function add_custom_scripts () {
    wp_enqueue_style( 'kendo.common', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.common.min.css' );
    //wp_enqueue_style( 'kendo.mobile.all', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.mobile.all.min.css' );
    wp_enqueue_style( 'kendo.rtl', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.rtl.min.css' );
    wp_enqueue_style( 'kendo.silver', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.silver.min.css' );
    wp_enqueue_script( 'kendo', plugins_url() . 'https://ebustos.com/wp-content/plugins/eb/customsplugins/kendo/kendo.all.min.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

 

function kendoTooltip ( $contenair=".widget_recent_entries", $elem = "li a") {
    $js = "
        <script>
              jQuery('$contenair').kendoTooltip({
                filter: '$elem',
                show: function(e){
                  if(this.content.text() !=''){
                    jQuery('[role=\"tooltip\"]').css('visibility', 'visible');
                  }
                },
                hide: function(){
                  jQuery('[role=\"tooltip\"]').css('visibility', 'hidden');
                },
                content: function(e){
                  var element = e.target[0];
                  if(element.offsetWidth < element.scrollWidth){
                    return e.target.text();
                  }else{
                    return '';
                  }
                }
              })
        </script>
        ";
    return $js;
}

 

En footer.php:

<?php echo kendoTooltip(); ?>

Añadir hojas de estilo y javascript

Hook WP para añadir hojas de estilo CSS y scripts Javascript/jQuery a colocar en plugin o functions.php del tema:

function add_custom_scripts_eb () {
    // Estilos CSS
    wp_enqueue_style( 'micss', plugins_url() . '/eb/plugins/dir/css/estilos.css' );

    // jQuery script
    wp_enqueue_script( 'mijs', plugins_url() . '/eb/plugins/dir/js/script.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts_eb' );