title: Vaadin 14 show full text of truncated cell on hover
body: <p>I have a grid that contains text of varying different lengths and have set the columns autoWidth to true but when I scroll down some of these overflow and I end up with ellipsis on the right hand side of the column. What I want to do is show the full text when the user hovers over the grid cell. I have added this to my shared-styles but it doesn't do what I want:</p>
  <pre><code>&lt;dom-module id=&quot;grid-styles&quot; theme-for=&quot;vaadin-grid&quot;&gt;
      &lt;template&gt;
          &lt;style&gt;
               [part~=&quot;cell&quot;]:hover ::slotted(vaadin-grid-cell-content) {
                  overflow: visible;
                  position: relative;
                  background-color: beige;
                  margin-left: -4px;  
                 }
   
          &lt;/style&gt;
      &lt;/template&gt;
  &lt;/dom-module&gt;
  </code></pre>
  <p>It shows me a few extra characters but not much more. I tried using overflow-x but that gave me a scroll bar and the same text that is already visible with the ellipsis.</p>
  <p>I'm clearly missing something but what?</p>