Blogueandomiblog

Ffffos a mostrar como podemos poner en nuestros posts una caja de texto con botón de seleccionar.

En la edición HTML de nuestra página pegamos este código

 

 

<span class="tooltip"> <!-- Tooltip --> Texto <!-- Contenido que se muestra --> <span> <!-- Contenido oculto que se mostrará al hacer :hover --> Texto que mostrara el tooltip </span></span>

Modificamos AQUI VA EL TEXTO A MOSTRAR por nuestro texto o código.

.tooltip { display: inline-block; position: relative; } /* Estilos del contenido, no del tooltip */ .tooltip span { background: #F03; /* Color del fondo */ border: 4px solid #F03; /* Borde, cambiar color junto con color de fondo */ bottom: 50px; /* Distancia relativa al tooltip **/ border-radius: 6px; /* Esquinas redondeadas */ color: white; /* Color texto */ font-size: 13px; /* Tamaño de letra */ left: 50%; line-height: 16px; margin-left: -88px; opacity: 0; padding: 8px; position: absolute; /* Importante, así el contenido sale del flujo */ text-align: center; /* Texto centrado */ /** Transición **/ transition: all .2s; visibility: hidden; width: 150px; /* Puedes quitar esto si quieres que se estire el contenido */ } span:hover.tooltip span { /* En el :hover vuelve a su posición y es visible*/ bottom: 30px; opacity: 1; visibility: visible; z-index: 100; }

Texto Texto que mostrara el tooltip

 ddddd