Using Tooltip with Action Card inside a Layout Row

Siemens iX
1

I’m trying to use a tooltip component with an Action Card component inside a Layout Row, the code snippet is shown below. The tooltip is not shown when I hover over the card.

 <IxRow>
              {Object.keys(globalAttributes).map((attr) => (
                <IxCol key={attr}>
                  <IxActionCard
                    icon="info-filled"
                    // style={{width : '500px'}}
                    heading={attr}
                    aria-describedby={`tooltip-${toolTipCount}`}
                    className={`card${cardCount++}`}
                    subheading={
                      globalAttributes[
                        attr as keyof typeof globalAttributes
                      ].toString().length > 25
                        ? `${globalAttributes[
                            attr as keyof typeof globalAttributes
                          ]
                            .toString()
                            .substring(0, 25)}` + "..."
                        : `${
                            globalAttributes[
                              attr as keyof typeof globalAttributes
                            ]
                          }`
                    }
                    variant="info"
                    onClick={console.log}
                  ></IxActionCard>
                  <IxTooltip
                    id={`tooltip-${toolTipCount}`}
                    for={`card${toolTipCount++}`}
                  >
                    {globalAttributes[attr as keyof typeof globalAttributes]}
                  </IxTooltip>
                </IxCol>
              ))}
            </IxRow>
2

You for tooltip property does not represent a valid class selector try for={`.card${toolTipCount++}`}.
A class selector starts with a .

1 Like