Hover a trimmed views field for full text?

Question

I have a text field in a views table which I use the Rewrite results -> Trim this field to a maximum length with ellipsis option on. Is it possible and how, so that when I hover this trimmed text I get the full version as a popup or that the view updates to show the full text?

Answer 1

Hate to answer my own bounty question but this works exactly as I want it.

I found a great way to do this with beautytips module. My field is an address (field_address). Add field_address to views and do rewrite->trim with ellipsis BUT exclude from display. Add the same field again this time rewriting the output of the field with:

<div class="beautytips" title="[field_address_1]">[field_address]</div>

(I have "Add beautytips js to every page" enabled in the beautytips settings)

+1 zhilevan's answer which is also a very good solution but is sadly missing the roll-back/rollup/close option which would mean very long tables with a few read mores open!

Answer 2

I suggest in Rewrite results put your result in a html element like <div> or <span> ,specify it with a id or class . and after it use Jquery Readmore Plugin .

This samples maybe useful for using of jquery readmore plugin

Answer 3

I'd say to do that with JS. It's much easier and will still do the job.

Steps:

1. Output the full field in the view
2. Trim it on page load; clone the original full description in a separate container and give it a special class or ID
3. Add an ellipsis at the end and attach a function on hover/click
4. Once user clicks/hovers, show the cloned description in a popup (if it's more text and would break the layout)

Depending on your needs, instead of this you can wrap the excess characters in a span and hide them. Once you click ellipsis you can just apply another class to the span and show it.

Answer 4

(function($) {
    Drupal.behaviors.expalain_popup = {
      attach:function() {
        jQuery('a.open_popup_link').click(function(){
          var node_id = jQuery(this).attr('data-value');
          window.open('/open_popup/node/'+node_id, 'Explain '+node_id,'width=450,height=600,resizable=1,scrollbars=1,toolbar=0,location=0');
        });
    }
  };
}(jQuery));

This code may help you to achieve your goal.