how to generate this type of messages?

Question

how to generate this type of messages?

Navigation

#1 by (3 votes)

3

I want to learn how to make these types of messages, is it a modal?

some example? Is it only css? what libraries are used to do it? jquery?

javascript html css

asked by hubman 23.01.2017 в 05:42

source

1 answer

Open a modal bootstrap window with JavaScript [closed] RegExp that detects if it matches a word, considering duplicate spaces and / or letters

score 3 · Accepted Answer

Yes, with tooltips.

If you put the mouse over the Javascript label of your question, when the floating box comes out, you give a right button and inspect the element you can see that this code is generated:

    <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>

What you have to do is make an event (onMouseOver for example) that collects the positions of the element it is on and puts a% floating% of it there (with innerHTML or you have created it and with the onMouseOver you make it visible) with the information you want to add

Example

.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>

In this page you will see more properties and functions working with tooltips