AddFeature:添加Tooltip显示友链描述

在链接处添加 data-tooltip-target 添加内容

Signed-off-by: XiaoLFeng <gm@x-lf.cn>
This commit is contained in:
筱锋xiao_lfeng 2023-07-09 10:55:48 +08:00
parent 6f759ced29
commit 1963214d14

View File

@ -30,7 +30,12 @@ class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translat
<div class="mx-auto max-w-4xl mb-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
@foreach($blogLink as $valueLink)
@if($valueLink->blogLocation == $valueSort->id)
<a href="{{ $valueLink->blogUrl }}" target="_blank">
<a href="{{ $valueLink->blogUrl }}" target="_blank" data-tooltip-target="friend-{{ $valueLink->id }}">
<div id="friend-{{ $valueLink->id }}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium
text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
{{ $valueLink->blogDescription }}
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<div
class="flex p-2 hover:bg-gray-100 bg-white border-2 {{ $blogColor[$valueLink->blogSetColor-1]->colorLightType }} rounded-lg
shadow-lg sm:p-4