0

I have an Angular2 app. There I am dynamically creating a table with rows/columns and inserting the data. I am using ellipses to truncate the data that is too long in any cell. Now, I would like to display a popover/popup when I hover on a cell data (that has text truncated with ellipsis) to display the full text. And, I want to make sure that this popover/popup is displayed only when I hover on a cell for which dats is truncated and not for others. How do I achieve this? the code to build the table is something like:

<tbody>
    <tr *ngFor="let row of rows......">
        <td *ngFor="let col of columns">
            <span [popover]="popTemplate"
              [innerHTML]="row[column.name]">
            </span>
            <template #popTemplate>
                <div >    
                    {{ row[column.name] }}                                 
                </div>
            </template>
        </td>
    </tr>   
</tbody>

Now, with this code, I always get a popover displayed when clicking on a cell. How do I make sure that popover is dipslayed only on clicking a cell for which the text got truncated with the usage of ellipses property in css?

user1892775
  • 2,001
  • 6
  • 37
  • 58
  • Maybe you could use JS/Typescript to get the real content being shown, compare it to the actual value and then perform the related action upon that. – hogan Sep 27 '17 at 03:04
  • Hogan, I have the object that contains the original content that I can pass from html to typescript. But, how do I get/retrieve and pass the real content from html to typescript? How do I get hold of that real content? – user1892775 Sep 27 '17 at 03:23
  • id you tried `[popoverOnHover]="true"` on ` `? – user1608841 Sep 27 '17 at 03:42
  • Rahul, my question is not on popover. My question is how to have it detect that a cell text was truncated with ellipsis, so we display popover only for that case to display the full text. I do not want to display the popover otherwise when the text was not truncated with ellipsis. so the question revolves around detecting ellipsis/text truncate for a given cell before deciding to display the popover – user1892775 Sep 27 '17 at 03:48
  • Ahhhh.... sorry..now I understand... Can u decide how many characters can fit in given area ? I mean let's say if 25 characters... Then u conditionally render the text like if more than 25 render text with Ellipsis and limit to 25 characters and also popover text else render as is . – user1608841 Sep 27 '17 at 04:06

0 Answers0