title: Angular show a text on hover depending on the state displayed in a <td>
body: <p>I am working in an Angular 7 project where have a <code>&lt;td&gt;</code> that I display diffrent colors to show the user the status of their task.
  Red - Shows work is 'Delayed'
  Orange - 'In progress'
  Grey - 'Rejected'</p>
  
  <p>At the moment I have manged to display these status colors, however now I want to add a text display on hover - when the user hover on each status they should be shown a message explaining meaning of the color.</p>
  
  <p>I have the following code
  Html:</p>
  
  <pre><code>&lt;td data-label="Status" class="cell status-cell"&gt;
     &lt;span [style.backgroundColor]="getStatus(working_period)"&gt;&lt;/span&gt;
       &lt;p&gt;Text on hover here&lt;/p&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Typescript:</p>
  
  <pre><code>public getStatus(period: WorkingPeriod): string {
      if (+period.status !== 2) {
        return 'grey';
      }
      const time: number = +new Date() - +period.endDate;
      if (time &gt; 2 * 24 * 60 * 60 * 1000) {
        return `red`;
      }
      return 'orange';
    }
  </code></pre>
  
  <p>I have <strong>NO</strong> problem with text hovering. </p>
  
  <p>My problem is is in matching the Text with the color displayed. </p>
  
  <p>See my <code>&lt;td&gt;</code>
  In this case for example, the text below orange I want it to be 'In progress', below red 'Delayed'.
  <a href="https://i.stack.imgur.com/015rO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/015rO.png" alt="enter image description here"></a></p>
  
  <p><em>(Please don't bash me I am still learning Angular)</em></p>
  
  <p>TIA</p>