Back to top + Tooltip

[Guido3000]

Hi there, is there any way to combine the back to top example https://tw-elements.com/docs/react/components/scroll-back-to-top-button/#basic with an tooltip (https://tw-elements.com/docs/react/components/tooltip/)?

• I tried several things but it does not work. Either the tooltip does not show or the back to top button does not work.

[iprzybysz]

Hi, you have to use wrapperProps prop and within it add onClick prop.

Here is my code:

import React, { useState, useEffect } from "react"; import { TERipple, TETooltip } from "tw-elements-react"; export default function BasicExample(): JSX.Element { const [showButton, setShowButton] = useState(false); const handleScroll = () => { if ( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ) { setShowButton(true); } else { setShowButton(false); } }; const backToTop = () => { document.documentElement.style.scrollBehavior = "smooth"; document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }; useEffect(() => { window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <> {/* <!-- Explanation --> */} <div className="mt-4 text-center text-gray-800 dark:text-white h-[2000px]"> <p className="mb-4"> Start scrolling the page and a strong{" "} <strong>"Back to top" button </strong> will appear in the{" "} <strong>bottom right corner</strong> of the screen. </p> <p>Click this button and you will be taken to the top of the page.</p> </div> {/* <!-- Back to top button --> */} {showButton && ( <TERipple rippleColor="light"> <TETooltip title="Scroll back to top" wrapperProps={{ onClick: backToTop }} className={` ${ showButton ? `inline-block` : `hidden` } fixed bottom-[40px] right-[40px] p-3 bg-red-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg transition duration-150 ease-in-out`} > <svg aria-hidden="true" focusable="false" data-prefix="fas" className="w-4 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" > <path fill="currentColor" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z" ></path> </svg> </TETooltip> </TERipple> )} </> ); } 

[Guido3000]

Thank you. Now it is working