Svelte 및 tailwindcss 툴팁!

Svelte 및 Tailwind 툴팁 구성요소

svelte 및 tailwindcss 프로젝트에 사용하기 쉬운 툴팁 구성 요소

설치

 $npm i @fouita/tooltip -D

용법

툴팁 구성 요소를 가져와서 다음과 같이 사용합니다.

<script>
    import Tooltip from '@fouita/tooltip'
</script>

<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=middle position=top text="Middle Top" show/>
</div>

위치

톱

왼쪽

오른쪽

보텀

바늘

스타트

미들

종료

색상 변경

color 및 text_color 소품을 사용하여 색상을 사용자 정의할 수 있습니다.

<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=start position=top text="Start Top" text_color=red-100 color=red-700 show />
</div>  

호버 동작

요소 위로 마우스를 가져갈 때 도구 설명을 표시하려면 다음과 같이 on:mouseenter 및 on:mouseleave 이벤트를 사용하고 표시 플래그를 토글할 수 있습니다.

<script>
    import Tooltip from '@fouita/tooltip'
    let show_elm = false
</script>

<div class="p-4 w-32 m-20 border rounded text-center relative" on:mouseenter={() => show_elm=true} on:mouseleave={() => show_elm=false}>
        Hover
        <Tooltip pointer=middle position=top text="Info to share!" w=48 show={show_elm}/>
</div>

w 속성을 추가하여 툴팁의 너비를 사용자 정의하고 tailwindcss에서 사용되는 배율을 사용할 수도 있습니다.

맞춤 콘텐츠

도구 설명에 사용자 지정 콘텐츠를 추가하려면 하위 태그를 추가하고 일부 html을 추가하면 됩니다.

<script>
    import Tooltip from '@fouita/tooltip'
    let show_elm = false
</script>

<div class="m-20 mt-64 w-32 p-4 border text-center relative cursor-pointer" on:click={() => show_elm=!show_elm} >
        Click
        <Tooltip pointer=end position=right color="red-500" show={show_elm}>
            <div class="p-4 w-64 bg-red-500 text-red-100">
                <div class="text-2xl font-bold mb-2">Custom Content!</div>
                <p class="text-left mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos dolores excepturi placeat, eos et iste magnam illo voluptates veritatis exercitationem laborum, doloremque eius omnis, enim corrupti inventore rem vero assumenda.</p>
                <button class="border-2 border-white py-2 px-4">
                    Great!
                </button>
            </div>
        </Tooltip>
</div>

소스 코드

Svelte and tailwindcss Tooltip

에 대한

Fouita : UI framework for svelte + tailwind components