jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🎨 style(GenericNode): refactor tooltip to improve accessibility and user experience

Browse source 
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:
Gabriel Luiz Freitas Almeida 2023-06-25 21:32:48 -03:00
commit 7d415e62df
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -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
title={
<a <a
href={data.node.documentation} href={data.node.documentation}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<Info /> {`Open ${data.node.display_name} documentation`}
</a> </a>
}
>
<Info />
</Tooltip> </Tooltip>
)} )}
</div> </div>