🎨 style(GenericNode): refactor tooltip to improve accessibility and user experience
The tooltip now includes a link to the documentation of the node, which makes it more accessible and user-friendly. The link is now wrapped in the tooltip title, which improves the semantics of the code.
This commit is contained in:
parent
0c398fb6c5
commit
7d415e62df
1 changed files with 12 additions and 8 deletions
|
|
@ -116,14 +116,18 @@ export default function GenericNode({
|
||||||
<div className="flex gap-3">
|
<div className="flex gap-3">
|
||||||
<div className=" px-5 pb-3 mr-5">
|
<div className=" px-5 pb-3 mr-5">
|
||||||
{data.node.documentation !== "" && (
|
{data.node.documentation !== "" && (
|
||||||
<Tooltip title={`Open ${data.node.display_name} documentation`}>
|
<Tooltip
|
||||||
<a
|
title={
|
||||||
href={data.node.documentation}
|
<a
|
||||||
target="_blank"
|
href={data.node.documentation}
|
||||||
rel="noopener noreferrer"
|
target="_blank"
|
||||||
>
|
rel="noopener noreferrer"
|
||||||
<Info />
|
>
|
||||||
</a>
|
{`Open ${data.node.display_name} documentation`}
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Info />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue