From de443ac03bdc62c2aa2cad4f43695f159889c3c2 Mon Sep 17 00:00:00 2001
From: Sarah Faey <s.ruspekhofer@gmail.com>
Date: Mon, 6 Feb 2023 12:56:40 +0100
Subject: [PATCH] added user tooltip to polls

---
 Lieb/Pages/Poll/PollDetails.razor     | 21 ++++++++++++++--
 Lieb/Pages/Poll/PollDetails.razor.css | 35 +++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/Lieb/Pages/Poll/PollDetails.razor b/Lieb/Pages/Poll/PollDetails.razor
index 4f0139f..c4b83ba 100644
--- a/Lieb/Pages/Poll/PollDetails.razor
+++ b/Lieb/Pages/Poll/PollDetails.razor
@@ -22,11 +22,28 @@
         {
             @foreach(var answer in Answers)
             {
-                <p>@answer.Key - @answer.Value </p>
+                <p class="nametooltip">
+                    @answer.Key - @answer.Value 
+                    <span class="tooltiptext">
+                        @foreach(PollAnswer pAnswer in _poll.Answers.Where(a => a.Answer == answer.Key))
+                        {
+                            <p>@UserService.GetLiebUser(pAnswer.UserId).Name</p>
+                        }
+                    </span>
+                </p> 
+                <br/>
             }
         }
         <br/>
-        <p>Not Answered - @_poll.Answers.Where(a => string.IsNullOrWhiteSpace(a.Answer)).Count() </p>
+        <p class="nametooltip">
+            Not Answered - @_poll.Answers.Where(a => string.IsNullOrWhiteSpace(a.Answer)).Count()
+            <span class="tooltiptext">
+                @foreach(PollAnswer pAnswer in _poll.Answers.Where(a => string.IsNullOrWhiteSpace(a.Answer)))
+                {
+                    <p>@UserService.GetLiebUser(pAnswer.UserId).Name</p>
+                }
+            </span>
+        </p> 
     </div>
 </body>
 
diff --git a/Lieb/Pages/Poll/PollDetails.razor.css b/Lieb/Pages/Poll/PollDetails.razor.css
index 29b5c56..e3b8606 100644
--- a/Lieb/Pages/Poll/PollDetails.razor.css
+++ b/Lieb/Pages/Poll/PollDetails.razor.css
@@ -9,4 +9,39 @@ body {
 
 h5 {
     color: lightgrey;
+}
+
+.nametooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+}
+
+.nametooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    top: -5px;
+    right: 110%;
+}
+
+.nametooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent black;
+}
+
+.nametooltip:hover .tooltiptext {
+    visibility: visible;
 }
\ No newline at end of file