Tooltip in XYChart - a way to make it compatible for mobile/touch devices

[mamo-muj]

Hi there, I'm currently using Tooltip but from XYChart. It works great with mouse, however, when you tap on a bar or line on mobile devices, the tooltip disappears. Is there a way to avoid this from happening?

As far as I understand, it's a mouse trigger so it probably doesn't work the same way for that reason. I do have some bandaid code applied by using the Annotation component butI'm sure there's better ways of executing this. Sharing a snippet of code below

{isAnnotationPresented && (isMobile || isTablet) && (
  <Annotation
    dataKey={annotationDataKey}
    datum={data[annotationDataIndex]}
    dx={dynamicDx}
    dy={dynamicDy}
  >
    <AnnotationLabel
      title={
        hasCurrencyInTooltip
          ? `AED ${convertToLocaleStringHelper(
              yAccessor(annotationDatum),
            )}`
          : hasPercentageInTooltip
          ? `${yAccessor(annotationDatum)}%`
          : yAccessor(annotationDatum)
      }
      subtitle={tooltipSubtext(annotationDatum)}
      showAnchorLine={false}
      width={175}
      backgroundFill={colors.black[400]}
      backgroundProps={{
        fillOpacity: 1,
        rx: 12,
      }}
      titleProps={{
        style: {
          fill: colors.white,
          fontFamily: "CircularXXWeb-Medium",
          fontWeight: "unset",
          fontSize: 14,
        },
      }}
      subtitleProps={{
        style: {
          fill: colors.black[200],
          fontFamily: "CircularXXWeb-Regular",
          fontWeight: "unset",
          fontSize: 14,
        },
      }}
      backgroundPadding={{
        top: 12,
        right: 16,
        bottom: 12,
        left: 16,
      }}
    />
  </Annotation>
)}
{isLaptop && (
  <Tooltip
    snapTooltipToDatumX
    snapTooltipToDatumY
    style={tooltipStyles}
    renderTooltip={({ tooltipData }) => {
      return (
        <div>
          {Object.entries(tooltipData.datumByKey).map(lineDataArray => {
            const [key, value] = lineDataArray;

            return (
              <div className={sharedTooltipClasses("top")} key={key}>
                {hasCurrencyInTooltip ? (
                  <span className="font-medium">
                    AED{" "}
                    {convertToLocaleStringHelper(
                      yAccessor(value.datum as any),
                    )}
                  </span>
                ) : hasPercentageInTooltip ? (
                  <span className="font-medium">
                    {yAccessor(value.datum as any)}%
                  </span>
                ) : (
                  <span className="font-medium">
                    {yAccessor(value.datum as any)}
                  </span>
                )}

                {tooltipSubtext && (
                  <span className="text-black-200">
                    {tooltipSubtext(value.datum)}
                  </span>
                )}
              </div>
            );
          })}
        </div>
      );
    }}
  />
)}