disabledismisswhentouchoutside: ture on screen everywhere

[AdamElitzur]

Hi,

I'm loving the package so far, thank you!

Just having one issue, for some reason the words disabledismisswhentouchoutside: true appear on the top and bottom of my screen, on every single page, and I can't get away from it. I am using the standard createTooltip file, but even when I delete everything the text stayed. Any ideas? Thanks!

[AdamElitzur]

It appears to be gone when I went in the next day, but I'm worried it might come back. Any ideas?

[alantoa]

Hey, @AdamElitzur I assume you are using development mode and refreshing when the simulator is open, right? If so, it's because the socket connection has been disconnected, causing it to not close immediately.
But I think this should not happen in production mode, because it will not pass through socket connection JS file in production mode.

[AdamElitzur]

Oh I see. I am using a development build with my device. Is there any way to avoid this?

Also, quick other question, is there any way to put a button in the tooltip, like the Twitter example, but actually make it work (on ios and android)? Right now, it treats the whole thing like a button. Thanks!

[alantoa]

Oh I see. I am using a development build with my device. Is there any way to avoid this?

I tried to find a way to avoid it, but I don't have a perfect solution. To be honest, there's no need to refresh the entire application frequently.

Also, quick other question, is there any way to put a button in the tooltip, like the Twitter example, but actually make it work (on ios and android)? Right now, it treats the whole thing like a button. Thanks!

I assume you want a context menu from Zeego. Check out this.

[AdamElitzur]

@alantoa thanks for the response! I'll look into it. I'm also having an issue on Android where it isn't tappable at all, for some reason the onTap argument on the Tooltip.Content just isn't doing anything on Android.

Another question, much less important, for some reason the arrow isn't showing up on iOS, but it is on Android.

Greatly appreciate any thoughts! Thank you! My code is below if helpful:

import { useState } from "react";
import {
Text,
View,
Platform,
ViewProps,
TouchableHighlight,
} from "react-native";
import * as Tooltip from "universal-tooltip";
import type { ContentProps } from "universal-tooltip";

const TriggerView = Platform.OS === "web" ? View : (TouchableHighlight as any);

export const CreateTooltip = ({
side = "top",
text,
backgroundColor = "#fff",
customView,
disableDismissWhenTouchOutside,
children,
title,
onWordPress,
...rest
}: ViewProps &
ContentProps & {
text: string;
customView?: JSX.Element;
disableDismissWhenTouchOutside?: boolean;
}) => {
const [open, setOpen] = useState(false);
return (
<Tooltip.Root
{...Platform.select({
web: {},
default: {
open,
onDismiss: () => {
setOpen(false);
},
},
})}
usePopover={isMobileWeb()}
delayDuration={300}
>
<Tooltip.Trigger>
<TriggerView
{...Platform.select({
web: { open: true },
default: {
open,
onPress: () => {
if (onWordPress) {
onWordPress();
}
setOpen(true);
},
},
})}
>
{children ? (
children
) : (

{title ?? text}

)}

</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
sideOffset={3}
containerStyle={{
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}}
onTap={() => {
setOpen(false);
console.log("onTap");
}}
dismissDuration={500}
disableTapToDismiss
side={side}
presetAnimation="fadeIn"
borderRadius={12}
{...rest}
>
{customView ? (
customView
) : (
<Tooltip.Text
text={text}
style={{
fontSize: 14,
fontWeight: "bold",
color: "#020202",
}}
/>
)}
<Tooltip.Arrow
width={10}
height={5}
backgroundColor={backgroundColor}
/>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
);
};

export function isAndroid(): boolean {
return (
typeof navigator !== "undefined" && /android/i.test(navigator.userAgent)
);
}

export function isSmallIOS(): boolean {
return (
typeof navigator !== "undefined" && /iPhone|iPod/.test(navigator.userAgent)
);
}

export function isLargeIOS(): boolean {
return typeof navigator !== "undefined" && /iPad/.test(navigator.userAgent);
}

export function isIOS(): boolean {
return isSmallIOS() || isLargeIOS();
}
export function isSafari(): boolean {
return (
typeof navigator !== "undefined" &&
/Safari/.test(navigator.userAgent) &&
!/Chrome/.test(navigator.userAgent)
);
}

export function isMobileWeb(): boolean {
return Platform.OS === "web" && (isAndroid() || isIOS());
}
export function isDesktopWeb(): boolean {
return Platform.OS === "web" && !isAndroid() && !isIOS();
}

Then in my main file (I commented out the ontap to see if it worked in the original file, neither worked):
<CreateTooltip
key={wordIndex}
text="Custom view"
backgroundColor="rgba(31,41,55,1)"
// onTap={() => {
// console.log("HEYHEHE");
// if (wordTranslations[word.toLowerCase()]?.translation) {
// saveWord(
// word,
// wordTranslations[word.toLowerCase()]?.translation
// );
// }
// }}
onWordPress={() => {
if (!wordTranslations[word.toLowerCase()]) {
translateWord(word);
}
}}
customView={

{word}
{wordTranslations[word.toLowerCase()]?.transliteration && (

{wordTranslations[word.toLowerCase()]?.transliteration}

)}

{wordTranslations[word.toLowerCase()]?.translation || (

)}

            <AntDesign
              name={wordSaved[word.toLowerCase()] ? "heart" : "hearto"}
              size={24}
              color="white"
            />
          </View>
        }
        side="top"
      >
        <Text
          className={lineClass}
          style={{ textAlign: rtl ? "right" : "left" }}
        >
          {word}
        </Text>
      </CreateTooltip>

[onreadystatechange]

@alantoa custom content can not clicked,it is a important feature when people select then res.just like when i want to coding the image.
I compared popular tooltip libraries. If you implement this feature, this must be the great, most popular and smoothest tooltip library.