Can I use HTML tooltip with react-native-render-html?

Question

I would like to use something like the HTML tooltip in my React Native app using react-native-render-html. For example, when a user touches a word or phrase I would like to do something like it is done in this w3schools example:

W3 Schools example of tooltip in HTML Note I modified it to mimic my code and it works as a tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background: black;
  color: #ffffff;
  padding: 5px 0;
  position: absolute;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body>

<h2>Right-aligned Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Some tooltip text</span>
</div>

</body>
</html>

The demo code which I am trying to model from the above example in react native with render-html is found in the following snack:

Expo Snack code with non-working tooltip

import { StyleSheet, View } from 'react-native';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';


export default function App() {
  const myClassStyles = {
    tooltip_class: {
      position: 'relative',
      display: 'inline-block',
      //      border_bottom: '1px dotted black',
      border: '1px dotted black',
      cursor: 'pointer',
    },
    tooltiptext_class: {
      visibility: 'hidden',
      width: '130px',
      background: 'black',
      color: '#ffffff',
      //text-align: "center",
      //border-radius: "6px",
      padding: '5px 0',
      position: 'absolute',
      //z-index: 1;
      top: '-5px',
      left: '105%',
    },
  };

  const source = {
    html: `
<div class="tooltip_class">Hover over me
  <span class="tooltiptext_class">Some tooltip text</span>
</div>
`,
  };
  const { width } = useWindowDimensions();
  return (
    <View style={styles.container}>
      <RenderHtml
        contentWidth={width}
        source={source}
        classesStyles={myClassStyles}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

But I cannot seem to make it work. Perhaps I have missed some limitation of render-html or perhaps a coding error. Is there another way to do it?

rjapenga · Accepted Answer · 2025-10-13 12:35:51Z

0

I found my problem. Apparently, react-native-render-html does not support the pseudo-class hover. And thus the code

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Cannot be implemented. I don't see a work-around.

answered Oct 13 at 12:35

rjapenga

2773 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I use HTML tooltip with react-native-render-html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related