From 1d47935123b21c87adf8ddb7807dce2df6322274 Mon Sep 17 00:00:00 2001
From: Torsten <torsten.schneider@programmschmiede.de>
Date: Thu, 23 Jun 2022 10:04:42 +0200
Subject: [PATCH] Tooltip CSS, first application in booking cancellation 'x'

---
 motorradig/public/css/custom.css              | 52 +++++++++++++++++++
 .../resources/views/tour/show.blade.php       | 36 ++++++++++---
 2 files changed, 82 insertions(+), 6 deletions(-)

diff --git a/motorradig/public/css/custom.css b/motorradig/public/css/custom.css
index f255fb6..1967069 100644
--- a/motorradig/public/css/custom.css
+++ b/motorradig/public/css/custom.css
@@ -69,6 +69,58 @@ p {
     display: none;
 }
 
+/*** Tooltip styles
+    Taken from https://www.w3schools.com/howto/howto_css_tooltip.asp
+ */
+/* Tooltip container */
+.ts_tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+    visibility: visible;
+}
+
+/* Tooltip text */
+.ts_tooltip .ts_tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+/* Tooltip arrow */
+.ts_tooltip .ts_tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.ts_tooltip:hover .ts_tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+
 /*******************
     Modal styles
 ********************/
diff --git a/motorradig/resources/views/tour/show.blade.php b/motorradig/resources/views/tour/show.blade.php
index ded7225..dfebdfd 100644
--- a/motorradig/resources/views/tour/show.blade.php
+++ b/motorradig/resources/views/tour/show.blade.php
@@ -1,11 +1,20 @@
 @extends('layouts.app')
 
 @section('content')
+
+
+
     <div class="container">
+
+
+
+
         <div class="row justify-content-center">
             <div class="col-md-8 mt-2">
                 <div class="card mt-4">
-                    <div class="card-header"><h5>{{ $tour->name }}</h5></div>
+
+                    <div class="card-header"><h5>{{ $tour->name }}</h5>
+                    </div>
 
                     <div class="card-body">
 
@@ -107,7 +116,10 @@
                                                     @if(strlen($room_id))
                                                         <hr/>
                                                     @endif
-                                                    <li style="list-style-type: none;">[{{$room->room_id}}] <span>{{$room->room_name}}</span><b><a href="/tour/{{$tour->id}}/join/{{$room->room_id}}"> ==> Buchen</a></b></li>
+                                                    <p style="list-style-type: none;">[{{$room->room_id}}]
+                                                        <span>{{$room->room_name}}
+                                                        </span><b><a href="/tour/{{$tour->id}}/join/{{$room->room_id}}"> ==> Buchen</a></b>
+                                                    </p>
 
                                                     <!-- Intentional Assignment ! -->
                                                     @if ($room_id=$room->room_id) @endif
@@ -144,18 +156,20 @@
                             @foreach($rooms as $room)
                                 @if ($room_id != $room->room_id)
                                     @if(strlen($room_id))
-                                        <hr/>
+                                        <p>-------------------------</p>
                                     @endif
-                                    <ul><b>[{{$room->room_id}}] {{$room->room_name}}</b></ul>
+                                    <p><b>[{{$room->room_id}}] {{$room->room_name}}</b></p>
 
                                     <!-- Intentional Assignment ! -->
                                     @if ($room_id=$room->room_id) @endif
                                 @endif
 
                                 @if(strlen($room->user_name))
-                                    <li> {{ $room->user_name}}
+                                    <li style="list-style:none"> {{ $room->user_name}}
                                         @if(Auth::user()->role=="ADMIN")
-                                            <a href="/tour/{{$tour->id}}/cancelBookingAdmin/{{$room->user_id}}" class="text-primary">(X)</a>
+                                            <a href="/tour/{{$tour->id}}/cancelBookingAdmin/{{$room->user_id}}" class="text-primary ts_tooltip">(X)
+                                                <span class="ts_tooltiptext">Stornieren</span>
+                                            </a>
                                         @endif
                                     </li>
                                 @endif
@@ -167,9 +181,19 @@
                 </div>
             </div>
 
+
         </div>
+
+
+
+
     </div>
 
+
+
+
+
+
     <script>
         // Get the modal
         var modal = document.getElementById("myModal");