Aki UI

Tooltip

ツールチップ

Delving into tooltip that triggers when text is selected with Tailwind CSS and Framer Motion, leveraging with Floating UI↗↗

Select me

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tempore officia porro! Voluptate sequi architecto vitae distinctio eum atque excepturi doloribus tempora. Explicabo, esse. Reprehenderit aliquam modi voluptates molestiae inventore.

Installation

Before start please make sure you follow instructions1

Install the following dependencies:2

npm install @floating-ui/reactnpm install framer-motion

Copy and paste the following code into a new component file:3

import React, { ReactNode, useEffect, useState } from 'react';

import { motion } from 'framer-motion'

import {

useFloating,

offset,

FloatingPortal,

} from "@floating-ui/react";

import { cn } from '@/lib/utils';

type TooltipProps = {

onEdit: (select: string) => void,

onComment: (select: string) => void,

How to use it4

"use client"

import Tooltip from "@/components/tooltip"

export default function Page() {

function handleEdit(selection: string) {

//console.log(selection)

};

function handleComment(selection: string) {

//console.log(selection)

};

Props

Tooltip

Name	Default	Description
onEdit	—	(select: string) => void Function call when user click on edit icon return text selected.
onComment	—	(select: string) => void Function call when user click on comment icon return text selected.
onShare	—	(select: string) => void Function call when user click on share icon return text selected.
onLock	—	(select: string) => void Function call when user click on lock icon return text selected.
className	w-fit h-fit relative	string The CSS class to be applied to the component.
props	—	HTMLProps<HTMLDivElement> Props to be applied to the component.