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; 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 Modal styles
********************/ ********************/

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

@ -1,11 +1,20 @@
@extends('layouts.app') @extends('layouts.app')
@section('content') @section('content')
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8 mt-2"> <div class="col-md-8 mt-2">
<div class="card mt-4"> <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"> <div class="card-body">
@ -107,7 +116,10 @@
@if(strlen($room_id)) @if(strlen($room_id))
<hr/> <hr/>
@endif @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 ! --> <!-- Intentional Assignment ! -->
@if ($room_id=$room->room_id) @endif @if ($room_id=$room->room_id) @endif
@ -144,18 +156,20 @@
@foreach($rooms as $room) @foreach($rooms as $room)
@if ($room_id != $room->room_id) @if ($room_id != $room->room_id)
@if(strlen($room_id)) @if(strlen($room_id))
<hr/> <p>-------------------------</p>
@endif @endif
<ul><b>[{{$room->room_id}}] {{$room->room_name}}</b></ul> <p><b>[{{$room->room_id}}] {{$room->room_name}}</b></p>
<!-- Intentional Assignment ! --> <!-- Intentional Assignment ! -->
@if ($room_id=$room->room_id) @endif @if ($room_id=$room->room_id) @endif
@endif @endif
@if(strlen($room->user_name)) @if(strlen($room->user_name))
<li> {{ $room->user_name}} <li style="list-style:none"> {{ $room->user_name}}
@if(Auth::user()->role=="ADMIN") @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 @endif
</li> </li>
@endif @endif
@ -167,9 +181,19 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
// Get the modal // Get the modal
var modal = document.getElementById("myModal"); var modal = document.getElementById("myModal");