8

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?

10

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!

0
7
+25

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

2
  • I think that would be great, but as the first comment says on the first link, it really needs roll-back too, especially as its in a table. – 7wonders Sep 7 '12 at 14:29
  • wow,+25 reputation. you are great 7wonders. Thanks. – Yuseferi Sep 17 '12 at 8:05
1

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.

1
(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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.