Skip to content

Commit 23a5dc4

Browse files
TheBSDTheBSD
authored
Merge pull request #103 from TheBSD/tooltip
feat: add tooltips to badges and remove filter/order controls
2 parents 28b7e88 + 56dffdd commit 23a5dc4

File tree

6 files changed

+238
-79
lines changed

6 files changed

+238
-79
lines changed

‎app/Livewire/AlternativeList.php

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@ public function render()
5656
$query->where('name', 'like', "%{$this->search}%");
5757
});
5858
});
59-
})
60-
->when($this->filter, function ($query): void {
61-
$query->whereHas('tagsRelation', function ($query): void {
62-
$query->where('tags.id', $this->filter);
63-
});
64-
})
65-
->when($this->order, function ($query): void {
66-
$query->orderBy('name', $this->order);
6759
});
60+
// ->when($this->filter, function ($query): void {
61+
// $query->whereHas('tagsRelation', function ($query): void {
62+
// $query->where('tags.id', $this->filter);
63+
// });
64+
// })
65+
// ->when($this->order, function ($query): void {
66+
// $query->orderBy('name', $this->order);
67+
// })
6868

6969
$alternatives = $query->simplePaginate(20,
7070
['alternatives.id', 'name', 'description', 'slug', 'image_path']);

‎app/Livewire/CompanyList.php

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,20 @@ public function render()
4949
$query->where('name', 'like', "%{$this->search}%");
5050
});
5151
});
52-
})
53-
->when($this->filter, function ($query): void {
54-
$query->whereHas('tagsRelation', function ($query): void {
55-
$query->where('tags.id', $this->filter);
56-
});
57-
})
58-
->when($this->order, function ($query): void {
59-
$query->orderBy('name', $this->order);
6052
});
53+
// ->when($this->filter, function ($query): void {
54+
// $query->whereHas('tagsRelation', function ($query): void {
55+
// $query->where('tags.id', $this->filter);
56+
// });
57+
// })
58+
// ->when($this->order, function ($query): void {
59+
// $query->orderBy('name', $this->order);
60+
// })
6161

62-
$companies = $query->simplePaginate(20,
63-
['companies.id', 'name', 'description', 'short_description', 'slug', 'image_path']);
62+
$companies = $query->simplePaginate(
63+
20,
64+
['companies.id', 'name', 'description', 'short_description', 'slug', 'image_path']
65+
);
6466

6567
return view('livewire.company-list', [
6668
'companies' => $companies,

‎resources/views/companies/show.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class="size-4"
4444
d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636"
4545
/>
4646
</svg>
47-
BOYCOTT
47+
Israeli Company
4848
</span>
4949
</h1>
5050

‎resources/views/investors/show.blade.php

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -40,23 +40,73 @@ class="h-40 w-40 rounded-lg object-cover"
4040
class="relative overflow-hidden rounded-xl border border-gray-200 shadow-sm transition-all hover:shadow-md"
4141
>
4242
<div class="">
43-
<!-- Boycott Badge -->
43+
<!-- Boycott Badge with tooltip -->
4444
<div
45-
class="absolute right-2 top-2 z-10 flex items-center rounded-full bg-red-600 px-2 py-1 text-xs font-bold text-white"
45+
x-data="{
46+
tooltipVisible: false,
47+
tooltipText: 'Israeli Company',
48+
tooltipArrow: true,
49+
tooltipPosition: 'left',
50+
}"
51+
x-init="
52+
$refs.content.addEventListener('mouseenter', () => {
53+
tooltipVisible = true
54+
})
55+
$refs.content.addEventListener('mouseleave', () => {
56+
tooltipVisible = false
57+
})
58+
"
59+
class="absolute right-2 top-2 z-20"
4660
>
47-
<svg
48-
xmlns="http://www.w3.org/2000/svg"
49-
class="h-3 w-3"
50-
viewBox="0 0 20 20"
51-
fill="currentColor"
61+
<div
62+
x-ref="tooltip"
63+
x-show="tooltipVisible"
64+
:class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-0.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-0.5 right-0 translate-x-full' : tooltipPosition == 'right' }"
65+
class="absolute w-auto text-sm"
66+
x-cloak
5267
>
53-
<path
54-
fill-rule="evenodd"
55-
d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367z"
56-
clip-rule="evenodd"
57-
/>
58-
</svg>
68+
<div
69+
x-show="tooltipVisible"
70+
x-transition
71+
class="relative rounded bg-black bg-opacity-90 px-2 py-1 text-white shadow-lg"
72+
>
73+
<p
74+
x-text="tooltipText"
75+
class="block flex-shrink-0 whitespace-nowrap text-xs"
76+
></p>
77+
<div
78+
x-ref="tooltipArrow"
79+
x-show="tooltipArrow"
80+
:class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }"
81+
class="absolute inline-flex items-center justify-center overflow-hidden"
82+
>
83+
<div
84+
:class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }"
85+
class="h-1.5 w-1.5 transform bg-black bg-opacity-90"
86+
></div>
87+
</div>
88+
</div>
89+
</div>
90+
91+
<div
92+
x-ref="content"
93+
class="relative flex cursor-pointer items-center rounded-full bg-red-600 px-2 py-1 text-xs font-bold text-white"
94+
>
95+
<svg
96+
xmlns="http://www.w3.org/2000/svg"
97+
class="h-3 w-3"
98+
viewBox="0 0 20 20"
99+
fill="currentColor"
100+
>
101+
<path
102+
fill-rule="evenodd"
103+
d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367z"
104+
clip-rule="evenodd"
105+
/>
106+
</svg>
107+
</div>
59108
</div>
109+
<!-- ./Boycott Badge with tooltip -->
60110
<div class="flex h-full flex-col p-5">
61111
<div class="mb-4 flex justify-center">
62112
<img

‎resources/views/livewire/alternative-list.blade.php

Lines changed: 77 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,37 @@ class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm fon
2020
wire:model.live="search"
2121
type="text"
2222
placeholder="Search..."
23-
class="w-full rounded-md border px-4 py-2 focus:border-blue-300 focus:outline-none focus:ring sm:w-2/3"
23+
class="w-full rounded-md border px-4 py-2 focus:border-blue-300 focus:outline-none focus:ring"
2424
/>
2525

2626
<!-- Filter select -->
27-
<label for="filter-select" class="sr-only">Filter by</label>
28-
<select
27+
{{--
28+
<label for="filter-select" class="sr-only">Filter by</label>
29+
<select
2930
id="filter-select"
3031
wire:model.live="filter"
3132
class="w-full rounded-md border px-4 py-2 focus:border-blue-300 focus:outline-none focus:ring sm:w-1/6"
32-
>
33+
>
3334
<option value="">Filter by</option>
3435
@foreach ($this->alternativesTags as $tag)
35-
<option value="{{ $tag->id }}">{{ $tag->name }} ({{ $tag->alternatives_count }})</option>
36+
<option value="{{ $tag->id }}">{{ $tag->name }} ({{ $tag->alternatives_count }})</option>
3637
@endforeach
37-
</select>
38+
</select>
39+
--}}
3840

39-
<label for="order-select" class="sr-only">Order by</label>
4041
<!-- Order select -->
41-
<select
42+
{{--
43+
<label for="order-select" class="sr-only">Order by</label>
44+
<select
4245
id="order-select"
4346
wire:model.live="order"
4447
class="w-full rounded-md border px-4 py-2 focus:border-blue-300 focus:outline-none focus:ring sm:w-1/6"
45-
>
48+
>
4649
<option value="">Order by</option>
4750
<option value="asc">Ascending</option>
4851
<option value="desc">Descending</option>
49-
</select>
52+
</select>
53+
--}}
5054
</div>
5155
</div>
5256
</section>
@@ -59,23 +63,72 @@ class="w-full rounded-md border px-4 py-2 focus:border-blue-300 focus:outline-no
5963
<div
6064
class="relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg bg-white shadow-sm transition-all duration-300 hover:shadow-md"
6165
>
62-
<!-- Alternative Badge (Top Right) -->
66+
<!-- Alternative Badge (Top Right) with Tooltip -->
6367
<div
64-
class="absolute right-2 top-2 z-10 flex items-center rounded-full bg-green-600 px-2 py-1 text-xs font-bold text-white"
68+
x-data="{
69+
tooltipVisible: false,
70+
tooltipText: 'NonIsraeli Alternate',
71+
tooltipArrow: true,
72+
tooltipPosition: 'left',
73+
}"
74+
x-init="
75+
$refs.content.addEventListener('mouseenter', () => {
76+
tooltipVisible = true
77+
})
78+
$refs.content.addEventListener('mouseleave', () => {
79+
tooltipVisible = false
80+
})
81+
"
82+
class="absolute right-2 top-2 z-20"
6583
>
66-
<svg
67-
xmlns="http://www.w3.org/2000/svg"
68-
class="size-4"
69-
x-description="Heroicon name: solid/check-circle"
70-
viewBox="0 0 24 24"
71-
fill="currentColor"
84+
<div
85+
x-ref="tooltip"
86+
x-show="tooltipVisible"
87+
:class="{ 'top-0 left-1/2 -translate-x-1/2 -mt-0.5 -translate-y-full' : tooltipPosition == 'top', 'top-1/2 -translate-y-1/2 -ml-0.5 left-0 -translate-x-full' : tooltipPosition == 'left', 'bottom-0 left-1/2 -translate-x-1/2 -mb-0.5 translate-y-full' : tooltipPosition == 'bottom', 'top-1/2 -translate-y-1/2 -mr-0.5 right-0 translate-x-full' : tooltipPosition == 'right' }"
88+
class="absolute w-auto text-sm"
89+
x-cloak
7290
>
73-
<path
74-
fill-rule="evenodd"
75-
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
76-
clip-rule="evenodd"
77-
/>
78-
</svg>
91+
<div
92+
x-show="tooltipVisible"
93+
x-transition
94+
class="relative rounded bg-black bg-opacity-90 px-2 py-1 text-white shadow-lg"
95+
>
96+
<p
97+
x-text="tooltipText"
98+
class="block flex-shrink-0 whitespace-nowrap text-xs"
99+
></p>
100+
<div
101+
x-ref="tooltipArrow"
102+
x-show="tooltipArrow"
103+
:class="{ 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom', 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right' }"
104+
class="absolute inline-flex items-center justify-center overflow-hidden"
105+
>
106+
<div
107+
:class="{ 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom', 'origin-top-right -rotate-45' : tooltipPosition == 'right' }"
108+
class="h-1.5 w-1.5 transform bg-black bg-opacity-90"
109+
></div>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<div
115+
x-ref="content"
116+
class="relative flex cursor-pointer items-center rounded-full bg-green-600 px-2 py-1 text-xs font-bold text-white"
117+
>
118+
<svg
119+
xmlns="http://www.w3.org/2000/svg"
120+
class="size-4"
121+
x-description="Heroicon name: solid/check-circle"
122+
viewBox="0 0 24 24"
123+
fill="currentColor"
124+
>
125+
<path
126+
fill-rule="evenodd"
127+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
128+
clip-rule="evenodd"
129+
/>
130+
</svg>
131+
</div>
79132
</div>
80133

81134
<!-- Country Badge (Top Left) - Different shape and color -->

0 commit comments

Comments
 (0)