TILA-2095: add tooltips to reservation form (#686)

Author: joonatank

admin-ui/src/component/my-units/BufferToggles.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { Checkbox } from "hds-react";
+import { Checkbox, Tooltip } from "hds-react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
@@ -42,6 +42,12 @@ const Wrapper = styled.div`
   gap: var(--spacing-s);
 `;
 
+const LabelWithTooltip = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-xs);
+`;
+
 const BufferToggles = ({
   before,
   after,
@@ -52,7 +58,10 @@ const BufferToggles = ({
   const { t } = useTranslation();
   return (
     <Wrapper>
-      <div>{t("reservationApplication:buffers.label")}</div>
+      <LabelWithTooltip>
+        {t("reservationApplication:buffers.label")}
+        <Tooltip>{t("reservationApplication:buffers.tooltip")}</Tooltip>
+      </LabelWithTooltip>
       {before && <BufferController name="bufferTimeBefore" seconds={before} />}
       {after && <BufferController name="bufferTimeAfter" seconds={after} />}
     </Wrapper>

admin-ui/src/component/my-units/ReservationTypeForm.tsx

@@ -71,6 +71,7 @@ const TypeSelect = ({
               ? t(`reservationForm:errors.${errors.type?.message}`)
               : ""
           }
+          tooltipText={t("reservationApplication:typeSelection.tooltip")}
         >
           {ReservationTypes.filter((x) => x !== "NORMAL").map((v) => (
             <RadioButton

admin-ui/src/i18n/locales/fi/reservationApplication.json

@@ -1,9 +1,13 @@
 {
   "reserveeTypePrefix": "Varaan",
   "type": "Varauksen tyyppi",
+  "typeSelection": {
+    "tooltip": "Sisäisissä varauksissa vastuu tilaisuudesta on aina kaupungilla. Ulkoisissa varauksissa vastuu tilaisuudesta on asiakkaalla. Vastuuhenkilö on nimettävä varauksella."
+  },
 
   "buffers": {
     "label": "Varauksen tauko",
+    "tooltip": "Asiakaspuolella varauksiin lisätään aina automaattinen tauko. Voit lisätä varauksesi alkuun tai loppuun tauon tässä.",
     "bufferTimeBefore": "Ennen vuoroa ({{minutes}} min)",
     "bufferTimeAfter": "Vuoron jälkeen ({{minutes}} min)"
   },