3

Quiero aprender a realizar este tipo de mensajes, es un modal?

introducir la descripción de la imagen aquí

algun ejemplo? es solo css? que librerias se usan para realizarlo? jquery?

2
  • 2
    Comúnmente se conocen como tooltips, puedes encontrar soluciones que utilizan solo CSS, y otras que requieren JS.
    – Marcos
    Commented el 23 ene. 2017 a las 14:05
  • Gracias, @MarcosGallardo no recordaba el nombre
    – lois6b
    Commented el 23 ene. 2017 a las 15:42

1 respuesta 1

3

Si, con tooltips.

Si pones el ratón encima de la etiqueta Javascript de tu pregunta, cuando salga el cuadro flotante, le das a boton derecho e inspeccionar elemento puedes ver que se genera este codigo:

    <div style="overflow: hidden; position: absolute; z-index: 1002; width: 350px; height: 165px; top: 455px; left: 76px;"><div id="tag-menu"><div>
    <div class="tm-heading">
        <span class="tm-sub-info">
            <a title="alternar esta etiqueta entre favorita, ignorada y normal" class="tm-favorite">★</a>
                        458 seguidores,
                <span title="2077">2.1k</span> preguntas            <span class="tm-sub-links" style="float:right;">
                        <a class="tm-se-subscription" title="suscribirse a las notificaciones de correo electrónico sobre esta etiqueta">suscribirse</a>
                    <span style="color:#727272;">|</span>
                <a href="/feeds/tag/javascript" title="añadir esta etiqueta a tu lector rss">rss</a>
            </span>
        </span>
    </div>
            <div class="tm-description">JavaScript (no confundir con Java) es un lenguaje de programación. Utiliza esta etiqueta para referirte a ECMAScript y sus distintas implementaciones (excluyendo ActionScript, Google-Apps-Script y Typescript). A menos que también se incluya una etiqueta de un framework / librería, se espera una respuesta de JavaScript puro.</div>
</div>
<span class="tm-links">
    <a href="/questions/tagged/javascript?sort=frequent">frecuente</a> 
    <a href="/tags/javascript/info">información</a> 
    <a href="/tags/javascript/topusers">usuarios principales</a>
        <a href="/edit-tag-wiki/16">editar</a>
    </span></div></div>

Lo que tendrás que hacer es hacer un evento (onMouseOver por ejemplo) que recoja las posiciones del elemento sobre el que está y ponga un Div flotante ahí (con innerHTML o lo tienes creado y con el onMouseOver lo haces visible) con la información que quieras añadir

Ejemplo

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
<p>Pon el raton sobre el texto de abajo:</p>

<div class="tooltip">Pasa el cursor
  <span class="tooltiptext">TEXTO
<div class="tm-heading">
    <span class="tm-sub-info">
            <a title="sdfasdf" class="tm-favorite">★</a>
                        458 seguidores,
                <span title="2077">2.1k</span> preguntas <span class="tm-sub-links" style="float:right;">
                        <a class="tm-se-subscription" title="asdfasdfa">suscribirse</a>
                    <span style="color:#727272;">|</span>
    </span>
    </span>
</div>
  
  </span>

</div>

En esta pagina podrás ver mas propiedades y funciones trabajando con tooltips

3
  • vaya ya entiendo. intentare hacerlo.
    – hubman
    Commented el 23 ene. 2017 a las 15:30
  • se llaman tooltips?
    – hubman
    Commented el 23 ene. 2017 a las 15:31
  • Si, con tooltips puedes hacer ventanas así. Te edito la respuesta en breves con algun pequeño ejemplo
    – lois6b
    Commented el 23 ene. 2017 a las 15:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.