torsten/motorradig
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tooltip CSS, first application in booking cancellation 'x'

Browse source
This commit is contained in:
Torsten 2022-06-23 10:04:42 +02:00
parent c69e13c446
commit 1d47935123
2 changed files with 82 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

52
motorradig/public/css/custom.css vendored
View file

@ -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
********************/

36
motorradig/resources/views/tour/show.blade.php
View file

@ -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");