Can't get hover to change child element

[cjohnweb]

Hello and thank you for taking your time to help me understand how to accomplish this! I've been a PHP guy for some 15 or so years, and only last year started learning Javascript. This year I took on NodeJS, React and Glamor and have really come to love writing JS. But there are still things I don't understand and can't seem to find examples or documentation on how to go about this the right way. After a few attempts of guessing / trial and error, I decided I just need to ask someone. So here I am, hoping this is the right place to ask questions :)

The following is a simple HTML/CSS hover tooltip, and is an example of what I am trying to accomplish. I would like to effectively recreate the same kind of CSS with my glamor file.

CSS based hover tooltip: http://jsfiddle.net/Ke23E/

I am trying to do this in a table cell, like so:

<tr>
<td {...styles.cell}><span {...styles.tooltip} className={"tooltip"}>Tooltip Text Here</span>Normal TD Cell Data</td>
</tr>

In the past I've used the ":hover": {} selector, but how do I get the hover selector to change another element?

Segment from glamor file:

cell: style({
  textAlign: "left",
  border: "0px solid #000000",
  padding: "0px",
  fontWeight: "normal",
  color: "#101010",
  fontSize: ".9rem",
  ":hover ????(span.tooltip)????": {
      display: "inline",
      border: "2px solid green",
      position: "absolute",
      top: "30px",
      left: "20px"
  }
}),
tooltip: style({
  display: "none"
}),

Thanks for the help!