Foundation - Información sobre herramientas de conceptos básicos de medios

Descripción

La información sobre herramientas se puede crear utilizando datos-información sobre herramientas en su etiqueta <span> . De forma predeterminada, la información sobre herramientas aparece debajo de la definición, pero puede hacer que la información sobre herramientas aparezca a la izquierda , a la derecha o en la parte superior de la definición.

ejemplo

El siguiente ejemplo demuestra el uso de información sobre herramientas para la Fundación.

<html>
   <head>
      <title>Tooltip</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <p>This an example for <span data-tooltip aria-haspopup = "true"
         class = "has-tip" data-disable-hover = 'false' tabindex = 1 title = "Below">
         Tooltip</span> which displays below.
      </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat.
      </p>

      <p>This an example for <span data-tooltip aria-haspopup = "true"
         class = "has-tip top" data-disable-hover = "false" tabindex = 2
         title = "Top">Tooltip</span> which displays on top.
      </p>

      <p>This an example for <span data-tooltip aria-haspopup = "true"
         class = "has-tip right" data-disable-hover = "false" tabindex = "3"
         title = "Right">Tooltip</span> which displays right.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
         ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Neque porro quisquam est, qui
         dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
         sed quia non numquam eius modi tempora incidunt ut labore et
         dolore magnam aliquam quaerat voluptatem. This an example for
         <span data-tooltip aria-haspopup = "true" class = "has-tip left"
            data-disable-hover = "false" tabindex = "4" title = "Left">
            Tooltip</span> which displays left.
      </p>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

salida

Realicemos los siguientes pasos dados anteriormente para ver cómo funciona el código:

Guarde el código HTML proporcionado anteriormente media_tooltips.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page