Home/ Questions/Q 5935437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:15:16+00:00

Html: <html> <head> <title>Tooltips</title> <link rel=stylesheet type=text/css href=tooltips.css /> </head> <body> <ul> <li tabindex=1>

  • 0

Html:

<html>
<head>
  <title>Tooltips</title>
  <link rel="stylesheet" type="text/css" href="tooltips.css" />
</head>
<body>
  <ul>
    <li tabindex="1">
      <span class="name">Capacity: 1.5 </span>
      <div class="tooltip">
    <p><strong>Some text</strong></p>
    <p>Some long long long  long long long  long long long  long long long  long long long  text</p>
      </div>
    </li>
  </ul>
</body>
</html>

Css:

li { position : relative; }

div.tooltip {
    display: none;
    position: absolute;
    top: 8px;
    left: 120px;
    width: 24em;
    z-index: 1;
    border: 1px solid gray;
    background: #fffdc3 top left repeat-x; 
}

How can I use hover-event of li to set div property (without js)? Something like:

li:hover -> div.tooltip { display : block; }
li:focus -> div.tooltip { display : block; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re very close. Your final selector is just a little confused.

    http://jsbin.com/oholo5/

    • 0