Quiero aprender a realizar este tipo de mensajes, es un modal?
algun ejemplo? es solo css? que librerias se usan para realizarlo? jquery?
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
tooltips
, puedes encontrar soluciones que utilizan soloCSS
, y otras que requierenJS
.