Skip to content

Commit

Permalink
refactor: add clickable link in tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@brenopolanski
brenopolanski committed Jul 26, 2023
1 parent 4186682 commit d36c7e2
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 35 deletions.
19 changes: 14 additions & 5 deletions components/Tooltip/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
import { Tooltip as AriaTooltip, TooltipAnchor, useTooltipState } from 'ariakit/tooltip';
import Linkify from 'react-linkify';
import { Tooltip as AriaTooltip, TooltipAnchor, useTooltipStore } from '@ariakit/react/tooltip';

export const Tooltip = ({ children, content, ...props }) => {
const tooltip = useTooltipState({ placement: 'bottom' });
const tooltip = useTooltipStore({ placement: 'bottom', showTimeout: 100 });

if (!content) return <span>{children}</span>;

return (
<>
<TooltipAnchor
state={tooltip}
store={tooltip}
className="focus-visible:ariakit-outline aria-disabled:opacity-50"
style={{ fontWeight: 'inherit' }}
{...props}
>
{children}
</TooltipAnchor>
<AriaTooltip
state={tooltip}
store={tooltip}
className="max-w-md px-2 py-1 text-sm border border-gray-500 rounded bg-neutral-50 drop-shadow"
>
{content}
<Linkify
componentDecorator={(decoratedHref, decoratedText, key) => (
<a key={key} className="text-[#2F80ED] underline" href={decoratedHref} target="blank">
{decoratedText}
</a>
)}
>
{content}
</Linkify>
</AriaTooltip>
</>
);
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"serve": "serve out"
},
"dependencies": {
"@ariakit/react": "^0.2.12",
"@tanstack/react-query": "^4.19.1",
"ariakit": "^2.0.0-next.42",
"axios": "^1.2.1",
"ethers": "^5.7.2",
"fathom-client": "^3.5.0",
Expand All @@ -21,6 +21,7 @@
"node-fetch": "^2.6.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-linkify": "^1.0.0-alpha",
"serve": "^14.1.2",
"zustand": "^4.1.5"
},
Expand Down
83 changes: 54 additions & 29 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,27 @@
# yarn lockfile v1


"@ariakit/[email protected]":
version "0.2.7"
resolved "https://registry.yarnpkg.com/@ariakit/core/-/core-0.2.7.tgz#b7ee9d44ec552f3010201ed01c4f40f18afc48c3"
integrity sha512-Hs0N1EMYq88WW4v9xnSIHNR38TvbQuoUX6FYFmeLCZSTIXQBiET7lr1DQXwOOmdEtRtlxQ5HsxbTkxeOkPv+eg==

"@ariakit/[email protected]":
version "0.2.12"
resolved "https://registry.yarnpkg.com/@ariakit/react-core/-/react-core-0.2.12.tgz#b2b1184f0ed5e817e92b76ae8684caec7f2eca06"
integrity sha512-3KSKlX10nnhCvjsbPW0CAnqG+6grryfwnMkeJJ/h34FSV7hEfUMexmIjKBVZyfBG08Xj8NjSK8kkx9c3ChkXeA==
dependencies:
"@ariakit/core" "0.2.7"
"@floating-ui/dom" "^1.0.0"
use-sync-external-store "^1.2.0"

"@ariakit/react@^0.2.12":
version "0.2.12"
resolved "https://registry.yarnpkg.com/@ariakit/react/-/react-0.2.12.tgz#4a2a2c0977e40cf192f44f3c54ea61d7ac4e02ac"
integrity sha512-4rAgMyUURHW78EKgRCanhyRUtsiYCOxO65BBHF4mg3tZsDeOvu9kBG5IAXX8mUgakTcyr0EKXuOtGThaj7gobA==
dependencies:
"@ariakit/react-core" "0.2.12"

"@ethersproject/[email protected]", "@ethersproject/abi@^5.7.0":
version "5.7.0"
resolved "https://registry.npmjs.org/@ethersproject/abi/-/abi-5.7.0.tgz"
Expand Down Expand Up @@ -344,17 +365,17 @@
"@ethersproject/properties" "^5.7.0"
"@ethersproject/strings" "^5.7.0"

"@floating-ui/core@^1.0.4":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.4.tgz#03066eaea8e9b2a2cd3f5aaa60f1e0f580ebe88e"
integrity sha512-FPFLbg2b06MIw1dqk2SOEMAMX3xlrreGjcui5OTxfBDtaKTmh0kioOVjT8gcfl58juawL/yF+S+gnq8aUYQx/Q==
"@floating-ui/core@^1.3.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==

"@floating-ui/dom@^1.0.0":
version "1.0.12"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.12.tgz#07c870a05d9b825a6d7657524f48fe6761722800"
integrity sha512-HeG/wHoa2laUHlDX3xkzqlUqliAfa+zqV04LaKIwNCmCNaW2p0fQi4/Kd0LB4GdFoJ2UllLFq5gWnXAd67lg7w==
version "1.4.5"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.5.tgz#336dfb9870c98b471ff5802002982e489b8bd1c5"
integrity sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==
dependencies:
"@floating-ui/core" "^1.0.4"
"@floating-ui/core" "^1.3.1"

"@formatjs/[email protected]":
version "1.11.4"
Expand Down Expand Up @@ -620,27 +641,6 @@ [email protected], arg@^5.0.2:
resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==

[email protected]:
version "0.17.0-next.27"
resolved "https://registry.yarnpkg.com/ariakit-react-utils/-/ariakit-react-utils-0.17.0-next.27.tgz#6749587a659ec9806439fe28209d155aff19f20e"
integrity sha512-YyL3sEowwaw6r8wRjENB9S4Hjz/ppyv5nJNeFkb6xaEX/QYUYmqL+lQch50LW04vj9oa8RGHlY2SmyQX3d7g3w==
dependencies:
ariakit-utils "0.17.0-next.27"

[email protected]:
version "0.17.0-next.27"
resolved "https://registry.yarnpkg.com/ariakit-utils/-/ariakit-utils-0.17.0-next.27.tgz#c9971d41526f5f8afa9e8ae7596d15ed22b2f977"
integrity sha512-IcjtuHl7FZP5mGrpvTSXqPUj+jRuIuBHlJAlxr3y4pxRgYpsYVpyZOClU3yrOoG7KUVApfmJjPOGWy00y+Gi+Q==

ariakit@^2.0.0-next.42:
version "2.0.0-next.42"
resolved "https://registry.yarnpkg.com/ariakit/-/ariakit-2.0.0-next.42.tgz#6fbb0de91cfef71b9ea2c486e532649c93d02a1e"
integrity sha512-GCLpC6h+wITwyK5Dt0grA0Kel/uBBop+4cbqWWjqcL8wL2hZQHKaus89RrtEcebAkDuvvgNDNOStPzvJ7geCGQ==
dependencies:
"@floating-ui/dom" "^1.0.0"
ariakit-react-utils "0.17.0-next.27"
ariakit-utils "0.17.0-next.27"

asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
Expand Down Expand Up @@ -1240,6 +1240,13 @@ lilconfig@^2.0.5, lilconfig@^2.0.6:
resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz"
integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==

linkify-it@^2.0.3:
version "2.2.0"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
dependencies:
uc.micro "^1.0.1"

loose-envify@^1.1.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
Expand Down Expand Up @@ -1555,6 +1562,14 @@ react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"

react-linkify@^1.0.0-alpha:
version "1.0.0-alpha"
resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-1.0.0-alpha.tgz#b391c7b88e3443752fafe76a95ca4434e82e70d5"
integrity sha512-7gcIUvJkAXXttt1fmBK9cwn+1jTa4hbKLGCZ9J1U6EOkyb2/+LKL1Z28d9rtDLMnpvImlNlLPdTPooorl5cpmg==
dependencies:
linkify-it "^2.0.3"
tlds "^1.199.0"

react@^18.2.0:
version "18.2.0"
resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
Expand Down Expand Up @@ -1782,6 +1797,11 @@ tailwindcss@^3.2.4:
quick-lru "^5.1.1"
resolve "^1.22.1"

tlds@^1.199.0:
version "1.240.0"
resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.240.0.tgz#3d3d776d97aa079e43ef4d2f9ef9845e55cff08e"
integrity sha512-1OYJQenswGZSOdRw7Bql5Qu7uf75b+F3HFBXbqnG/ifHa0fev1XcG+3pJf3pA/KC6RtHQzfKgIf1vkMlMG7mtQ==

to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
Expand All @@ -1804,6 +1824,11 @@ type-fest@^2.13.0:
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==

uc.micro@^1.0.1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==

update-browserslist-db@^1.0.9:
version "1.0.10"
resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz"
Expand Down

0 comments on commit d36c7e2

Please sign in to comment.