title: show Tooltip only when the ellipsis is active
body: <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;td mat-cell [attr.id]="hospital.organizational_id + '_hospitalname'" 
      *matCellDef="let hospital"&gt;
      &lt;div id="hospital_name" class="truncate" 
          [matTooltip]="hospital.organization_name.length &gt; 32 ? 
          hospital.organization_name: '' "&gt;
          {{hospital.organization_name}}
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.truncate {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: block !important;
  }
  </code></pre>
  
  <p>I want a tool-tip to be displayed dynamically purely depending on the ellipsis.But the problem is tool-tip displayed but it is also getting displayed for the data which doesn't have ellipsis.I'm using angular-material</p>
  
  <p>I have written some CSS after referring some sites</p>
  
  <p>The expected behaviour is should get tool-tip only for the data which has ellipsis otherwise it should be hidden and u can see I'm using angular material.</p>
  
  <p>I have seen some solutions with jquery and it doesn't work for me.
  Is there a way to solve this?</p>
  
  <p>Thanks in advance</p>