Mostrar tooltip del texto si no cabe en una linea

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(); ?>