anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tooltip content for MediaImageCard

Browse Source
This commit is contained in:
bivashy
2026-01-16 11:32:42 +05:00
parent 0858920f4b
commit 295c68c52a
6 changed files with 212 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/pages/index.vue
View File

@ -4,6 +4,7 @@ import HeroSection from '@/components/ui/internal/HeroSection.vue';
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
const tooltipCollisionBoundary = ref<Element | undefined>(undefined);
</script>
<template>
@ -30,28 +31,100 @@ import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageC
View all
</Button>
</div>
<div
<div ref="tooltipCollisionBoundary"
class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
<MediaImageCard image_url="example/jigokuraku.jpg" title="Jigokuraku 2nd Season" type="anime" />
<MediaImageCard image_url="example/jigokuraku.jpg" title="Jigokuraku 2nd Season" type="anime"
:tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/jujutsukaisen.jpg"
title="Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen" type="anime" />
title="Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen" type="anime" :tooltipEnabled="true"
:tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/okiraku.jpg" title="Okiraku Ryoushu no Tanoshii Ryouchi Bouei"
type="anime" />
<MediaImageCard image_url="example/oshi no ko.jpg" title="[Oshi no Ko] 3rd Season" type="anime" />
<MediaImageCard image_url="example/shibou.jpg" title="Shibou Yuugi de Meshi wo Kuu." type="anime" />
type="anime" :tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/oshi no ko.jpg" title="[Oshi no Ko] 3rd Season" type="anime"
:tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/shibou.jpg" title="Shibou Yuugi de Meshi wo Kuu." type="anime"
:tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/sousounofrieren.jpg" title="Sousou no Frieren 2nd Season"
type="anime" />
<MediaImageCard image_url="example/tamonkun.jpg" title="Tamon-kun Ima Docchi!?" type="anime" />
type="anime" :tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/tamonkun.jpg" title="Tamon-kun Ima Docchi!?" type="anime"
:tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/yuusha party.jpg" title="Yuusha Party wo Oidasareta Kiyou Binbou"
type="anime" />
type="anime" :tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/jujutsukaisen.jpg"
title="Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi"
type="anime" />
type="anime" :tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/okiraku.jpg"
title="Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji"
type="anime" />
title="Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji" type="anime"
:tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<MediaImageCard image_url="example/oshi no ko.jpg"
title="[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag" type="anime" />
title="[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag" type="anime"
:tooltipEnabled="true" :tooltipMetadata="{
studio: 'MAPPA',
type: 'TV Show',
episodes: 12,
rating: 78,
tags: ['action', 'adventure']
}" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
<SkeletonMediaImageCard />
</div>
</div>