Purpose: My main goal is to implement a tooltip feature where hovering over text triggers the display of a tooltip. To achieve this, I am seeking inspiration from an example on w3schools which can be found at this link.
Current Implementation:
render() {
return (
<div >
<h2>Tooltip</h2>
<p>Hover over the text below:</p>
<div class = "tooltip">
Hover over me
// <img src = "assets/images/react.png" alt="React / React Native" className = "icons"></img>
<span class = "tooltiptext">
Tooltip text
</span>
</div>
</div>
);
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip, .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: black;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
right: 100px;
z-index: 1;
/* bottom: 125%; */
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip, .tooltiptext::after {
content: "";
position: absolute;
/* top: 100%; */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover, .tooltiptext {
visibility: visible;
opacity: 1;
}
Note: Some positioning styles in the CSS have been temporarily disabled for ease of troubleshooting. Additionally, my end goal is to have the tooltip displayed when hovering over a tech icon, but I am starting with a simple setup.
Current Issue: The "Hover Over Me" text and tooltip are not displaying correctly; they appear white and cannot be seen. However, hovering over the tooltip text reveals both elements. I am working on adjusting the element positions using developer tools. Furthermore, the tooltip itself is not rendering as expected.