skip to Main Content

Is it possible to create Modal using TippyJs? I managed to create tooltips and Popovers but I dont know how to create Modal. If no, which library do you recommend to create modal in react?

2

Answers


  1. You can’t create Modals with TippyJS

    "Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web"

    But you can choose lot of libs to make modals, depends on all your needs.

    By example MaterialUI have a modal system https://mui.com/material-ui/react-modal/

    You can have it too with Boostrap by example https://mdbootstrap.com/docs/react/components/modal/

    You can search for snippets or pre-made components on website like this too https://reactjsexample.com/tag/modals/

    And to finish, the best way to make a modal, it’s to make your own !

    Have a nice day

    Login or Signup to reply.
  2. you can use bootstrap or other framework but if you want to use the Tippy only and not want to use the other frame work than you need to use something like this code , where you need the ref hook and than use the function content , let see if its work for you otherwise in bootstrap and other framework have specific classes for model with different parameters’ , you can utilized those.

     import React, { useRef } from 'react';
    import Tippy from '@tippyjs/react';
    import 'tippy.js/dist/tippy.css'; // include styles
    
    const MyModal = () => {
       const buttonRef = useRef(null);
    
       const content = (
        <div>
          <h1>This is a modal!</h1>
          <p>Here's some more content.</p>
          <button onClick={() => buttonRef.current._tippy.hide()}>
            Close Modal
          </button>
        </div>
      );
    
      return (
        <div>
           <Tippy
            content={content}
            interactive={true}
            trigger="click"
            appendTo={() => document.body}
            ref={buttonRef}
          >
            <button>Show Modal</button>
          </Tippy>
        </div>
      );
    };
    
    export default MyModal;
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search