add title attr to text text links (#1228)

* add title attr to text text links

* Revert "add title attr to text text links"

This reverts commit c028cd184e.

* use css tooltips

* add to expanded post state

* handle theming

* add to bskyweb

src/view/com/util/Link.tsx

@@ -135,6 +135,7 @@ export const TextLink = observer(function TextLink({
   numberOfLines,
   lineHeight,
   dataSet,
+  title,
 }: {
   testID?: string
   type?: TypographyVariant
@@ -144,6 +145,7 @@ export const TextLink = observer(function TextLink({
   numberOfLines?: number
   lineHeight?: number
   dataSet?: any
+  title?: string
 } & TextProps) {
   const {...props} = useLinkProps({to: sanitizeUrl(href)})
   const store = useStores()
@@ -173,8 +175,8 @@ export const TextLink = observer(function TextLink({
       style={style}
       numberOfLines={numberOfLines}
       lineHeight={lineHeight}
-      // @ts-ignore web only -prf
       dataSet={dataSet}
+      title={title}
       // @ts-ignore web only -prf
       hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
       {...props}>
@@ -197,6 +199,7 @@ interface DesktopWebTextLinkProps extends TextProps {
   accessible?: boolean
   accessibilityLabel?: string
   accessibilityHint?: string
+  title?: string
 }
 export const DesktopWebTextLink = observer(function DesktopWebTextLink({
   testID,
@@ -218,6 +221,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
         text={text}
         numberOfLines={numberOfLines}
         lineHeight={lineHeight}
+        title={props.title}
         {...props}
       />
     )
@@ -229,6 +233,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
       style={style}
       numberOfLines={numberOfLines}
       lineHeight={lineHeight}
+      title={props.title}
       {...props}>
       {text}
     </Text>

src/view/com/util/PostMeta.tsx

@@ -79,6 +79,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
             lineHeight={1.2}
             text={timeElapsed}
             accessibilityLabel={niceDate(opts.timestamp)}
+            title={niceDate(opts.timestamp)}
             accessibilityHint=""
             href={opts.postHref}
           />
@@ -94,6 +95,7 @@ const styles = StyleSheet.create({
     alignItems: isAndroid ? 'center' : 'baseline',
     paddingBottom: 2,
     gap: 4,
+    zIndex: 1,
   },
   avatar: {
     alignSelf: 'center',

src/view/com/util/text/Text.tsx

@@ -6,6 +6,8 @@ import {useTheme, TypographyVariant} from 'lib/ThemeContext'
 export type CustomTextProps = TextProps & {
   type?: TypographyVariant
   lineHeight?: number
+  title?: string
+  dataSet?: Record<string, string | number>
 }
 
 export function Text({
@@ -13,13 +15,19 @@ export function Text({
   children,
   lineHeight,
   style,
+  title,
+  dataSet,
   ...props
 }: React.PropsWithChildren<CustomTextProps>) {
   const theme = useTheme()
   const typography = theme.typography[type]
   const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
   return (
-    <RNText style={[s.black, typography, lineHeightStyle, style]} {...props}>
+    <RNText
+      style={[s.black, typography, lineHeightStyle, style]}
+      // @ts-ignore web only -esb
+      dataSet={Object.assign({tooltip: title}, dataSet || {})}
+      {...props}>
       {children}
     </RNText>
   )