conditionally rendering the tool tip with two conditions

Question

i have below button where i am showing the tool tip when you hover on that button based on conditions

    import { Button,Tooltip} from 'antd'; 

     <Tooltip
              placement="top"
              title={
                !isRevitMode
                  ? 'You must be in Revit to link the model.'
                  : [
                      state.isReadOnly
                        ? 'You do not have rights to sync data, as project admin to provide you access.'
                        : ''
                    ]
              }
            >
              <Button type="primary" disabled={!isRevitMode || state.isReadOnly}>
                Link model with project
              </Button>
            </Tooltip>

at the moment first it will check revit mode and i am showing message if not in revitmode and then after i am checking for isReadOnly flag and showing relevant information on tooltip text. I need to show empty tool tip text some how when this conditions are met how can i show that empty.

Could any one please let me know how can i achieve this or any other way? many thanks in advance

The logic appears to be sound. I.e., is the problem just that returning `''` doesn't behave correctly, such that you merely need an alternative to empty quotes? Or are you finding an issue w/the logic? Be more specific about exactly what your issue is and what's not behaving as expected. What are you seeing? What do you expect to see? — Marc, Nov 13 '20 at 20:38
I am finding an issue with this, if both conditions are met i need to show nothing on tooltip but with the above code i am getting an empty space when i hover on that button — Glory Raj, Nov 13 '20 at 21:09
Seems like you're trying to omit the `title` attribute completely, rather than setting it to empty string. Maybe review this question here for how to omit an attribute from a component's HTML: https://stackoverflow.com/questions/31163693/how-do-i-conditionally-add-attributes-to-react-components — Marc, Nov 13 '20 at 21:16
that might not be work, and antd tool tip does not have required attribute — Glory Raj, Nov 13 '20 at 21:24

Chanandrei · Accepted Answer · 2020-11-17T00:43:13.427

You are close! When you return null instead of '' the tooltip will not show. Also remove the array. Your code should be look like this:

<Tooltip
    title={
        !isRevitMode
            ? "You must be in Revit to link the model."
            : state.isReadOnly
            ? "You do not have rights to sync data, as project admin to provide you access."
            : null
    }
>
    <Button type="primary" disabled={!isRevitMode || state.isReadOnly}>
        Link model with project
    </Button>
</Tooltip>

or this:

//const tooltipText = !isRevitMode
//    ? "You must be in Revit to link the model."
//    : state.isReadOnly
//    ? "You do not have rights to sync data, as project admin to provide you access."
//    : null;

let tooltipText = null;
if (!isRevitMode) {
    tooltipText = "You must be in Revit to link the model.";
} else if (state.isReadOnly) {
    tooltipText = "You do not have rights to sync data, as project admin to provide you access.";
}

<Tooltip title={tooltipText}>
    <Button type="primary" disabled={tooltipText}>
        Link model with project
    </Button>
</Tooltip>;

Working code here:

thanks for suggestion and getting lint error do not nest ternary expressions — Glory Raj, Nov 16 '20 at 16:01

conditionally rendering the tool tip with two conditions

1 Answers1