Skip to content

Instantly share code, notes, and snippets.

@drikusroor

drikusroor/Tooltip.jsx

Last active January 21, 2023 12:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save drikusroor/5fc5b447f53d6e644ba371acccd77a73 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save drikusroor/5fc5b447f53d6e644ba371acccd77a73 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. drikusroor revised this gist Jan 21, 2023. 2 changed files with 2 additions and 1 deletion.
    1 change: 1 addition & 0 deletions Tooltip.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@ export function Tooltip({ content }) {
    ease-in-out duration-300 transition-[transform,opacity]`}
    >


    {/* Set inner HTML or just output content in an expression */}
    <span dangerouslySetInnerHTML={{ __html: content }}></span>

    2 changes: 1 addition & 1 deletion Parent.jsx → TooltipParent.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -13,4 +13,4 @@ export function ParentComponent() {
    )}
    </div>
    );
    }
    }
  2. drikusroor revised this gist Jan 21, 2023. 2 changed files with 5 additions and 5 deletions.
    4 changes: 2 additions & 2 deletions Parent.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,10 @@ import { Tooltip } from "./Tooltip";

    export function ParentComponent() {

    // This can be purely text or html
    // This can be purely text or html
    const content = "This is a tooltip message.";

    return (
    return (
    {/* Tooltip will be positioned relative to the element with the 'relative' class */}
    <div className="relative">
    {content && (
    6 changes: 3 additions & 3 deletions Tooltip.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    export function Tooltip({ content }) {
    return (
    {/* Tailwind's group class will be used trigger the hover */}
    {/* Tailwind's group class will be used trigger the hover */}
    <span className="group">

    {/* Font Awesome question mark icon */}
    {/* Font Awesome question mark icon */}
    <i className="fas fa-question-circle text-black group-hover:scale-120 ml-1 cursor-pointer ease-in-out duration-300 transition-transform"></i>
    <span
    className={`
    @@ -15,7 +15,7 @@ export function Tooltip({ content }) {
    ease-in-out duration-300 transition-[transform,opacity]`}
    >

    {/* Set inner HTML or just output content in an expression */}
    {/* Set inner HTML or just output content in an expression */}
    <span dangerouslySetInnerHTML={{ __html: content }}></span>

    {/* Optional speech balloon triangle pointing down */}
  3. drikusroor revised this gist Jan 21, 2023. No changes.
  4. drikusroor created this gist Jan 21, 2023.
    16 changes: 16 additions & 0 deletions Parent.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    import { Tooltip } from "./Tooltip";

    export function ParentComponent() {

    // This can be purely text or html
    const content = "This is a tooltip message.";

    return (
    {/* Tooltip will be positioned relative to the element with the 'relative' class */}
    <div className="relative">
    {content && (
    <Tooltip content={content} />
    )}
    </div>
    );
    }
    31 changes: 31 additions & 0 deletions Tooltip.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    export function Tooltip({ content }) {
    return (
    {/* Tailwind's group class will be used trigger the hover */}
    <span className="group">

    {/* Font Awesome question mark icon */}
    <i className="fas fa-question-circle text-black group-hover:scale-120 ml-1 cursor-pointer ease-in-out duration-300 transition-transform"></i>
    <span
    className={`
    w-full absolute rounded shadow
    text-sm font-normal font-sans bg-black text-white p-2
    pointer-events-none group-hover:pointer-events-auto
    opacity-0 group-hover:opacity-100
    left-0 -top-3 -translate-y-3/4 group-hover:-translate-y-full
    ease-in-out duration-300 transition-[transform,opacity]`}
    >

    {/* Set inner HTML or just output content in an expression */}
    <span dangerouslySetInnerHTML={{ __html: content }}></span>

    {/* Optional speech balloon triangle pointing down */}
    <div
    className={`
    absolute w-0 h-0 border-l-4 border-t-4 border-r-4 border-b-4 border-black
    left-1/2 -translate-x-2 -bottom-1 transform rotate-45 shadow`}
    ></div>

    </span>
    </span>
    );
    }