Html Question posted in
Some basic documentation can be found here.

Html – How do I display a window with information when hovering over an image?"

My code:

    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Imagem com informações</title>
      <style>
        .container {
         position: relative;
         display: inline-block;
        }

        .info-box {
          visibility: hidden;
          width: 200px;
          background-color: #f9f9f9;
          color: #333;
          text-align: center;
          border-radius: 5px;
          padding: 10px;
          position: absolute;
          z-index: 1;
          bottom: 125%;
          left: 50%;
          transform: translateX(-50%);
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .container:hover .info-box,
        .container img:hover + .info-box {
         visibility: visible;
       }
  </style>
</head>
<body>

<div class="container">
  <img src="https://m.media-amazon.com/images/I/81YFrKSH40L._AC_UF894,1000_QL80_.jpg" alt="Imagem" width="114" height="114">
  <div class="info-box">
    <!-- Informações adicionais -->
    <h2>Título da Informação</h2>
    <p>Descrição da informação.</p>
  </div>
</div>

</body>
</html>

The picture appears, but the information box note. It’s a code for web and mobile application. I just want to show more information about the image when the user click with the mouse or pass the finger over the image.

Tags:

2

Answers


  1. 0

    The basic and easiest way to add a tooltip is you can use the title attribute in the image.

     <img src="https://m.media-amazon.com/images/I/81YFrKSH40L._AC_UF894,1000_QL80_.jpg" alt="Imagem" width="114" height="114" title="5 Minute Dungeon">

    Or if you want to explore more on others.

    Here are some references you can start of:

    https://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

    https://atomiks.github.io/tippyjs/

    Login or Signup to reply.
  2. 0

    Try:

    .info-box {
  visibility: hidden;
  width: 200px;
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: relative;
  z-index: 1;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search