DEV Community

Cover image for Svelte and tailwindcss tooltip!
haynajjar
haynajjar

Posted on

8 5

Svelte and tailwindcss tooltip!

Svelte and Tailwind tooltip component

Easy to use Tooltip component for your svelte and tailwindcss projects

Install

 $npm i @fouita/tooltip -D

Usage

Import the tooltip component and use it like the following

fouita tooltip

<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>

Positions

  • top
  • left
  • right
  • bottom

Pointer

  • start
  • middle
  • end

Change Color

You can use color and text_color props to customize the color

fouita tooltip

<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>  

Hover action

To show the tooltip when hovering on an element you can use on:mouseenter and on:mouseleave events and toggle a show flag, like the following.

fouita tooltip

<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>

We can also customize the width of the tooltip by adding w attribute and use the scale used in tailwindcss.

Custom content

To add custom content to a tooltip we can just add children tags and add some html

fouita tooltip

<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>

Source code

Svelte and tailwindcss Tooltip

About

Fouita : UI framework for svelte + tailwind components

Image of Datadog

Learn how to monitor AWS container environments at scale

In this eBook, Datadog and AWS share insights into the changing state of containers in the cloud and explore why orchestration technologies are an essential part of managing ever-changing containerized workloads.

Download the eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Retry later