addition of tooltip text

app/views/v6/company-details.html

@@ -62,7 +62,16 @@ <h2 class="govuk-heading-l">Current claims</h2>
             <tr class="govuk-table__row">
               <th scope="col" class="govuk-table__header">Claim ID</th>
               <th scope="col" class="govuk-table__header">Claim amount</th>
-              <th scope="col" class="govuk-table__header">Claim due date</th>
+              <th scope="col" class="govuk-table__header">
+                <div class="tooltip">Claim due date
+                <span class="tooltiptext">The date by which the claim is due to be paid</span>
+              </div>
+            </th>
+
+
+
+
+
               <th scope="col" class="govuk-table__header"></th>
             </tr>
           </thead>

public/stylesheets/application.css

@@ -7,6 +7,41 @@
   text-decoration-thickness: max(1px, .0625rem);
   text-underline-offset: 0.1em;
 }
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 20%;
+  margin-left: -60px;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
 /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud  */
 @font-face {
   font-family: "GDS Transport";
@@ -15049,4 +15084,4 @@ p, .govuk-body, .movement-slip__summary__row, .govuk-body-m {
 
 .float-right {
   float: right;
-}
+}