web-dev-qa-db-fra.com

Ajouter une info-bulle à une zone de saisie

J'utilise la bibliothèque CSS.Tooltips pour essayer d'obtenir une info-bulle à afficher sur une balise input. Je peux le faire fonctionner sur une balise p mais pas sur une balise input. Des idées?

Voici un lien vers le violon: http://jsfiddle.net/cwlanca/BumU5/1/

html

<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p>
</br>
</br>
</br>
<input data-tip="This is the text of the tooltip" value="44"/>

Css

[data-tip] {
    position:relative;

}
[data-tip]:before {
    content:'';
    /* hides the tooltip when not hovered */
    display:none;
    content:'';
    display:none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
}
[data-tip]:after {
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:35px;
    left:0px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    height:18px;
    line-height:18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space:nowrap;
    Word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
    display:block;
}
html5css3tooltip
39
Lance Collins

Cela semble être un bogue, il fonctionne pour tous les types d’entrée qui ne sont pas des zones de texte (cases à cocher, radio, ...)

Il existe une solution rapide qui fonctionnera.

<div data-tip="This is the text of the tooltip2">
    <input type="text" name="test" value="44"/>
</div>

JsFiddle

36
Justin Lessard

Je sais que cette question concerne la bibliothèque CSS.Tooltips. Cependant, pour tous ceux qui sont venus ici, comme je l'ai fait dans le cadre de la recherche sur Google "info-bulle pour la zone de saisie", voici le moyen le plus simple:

<input title="This is the text of the tooltip" value="44"/>
123
user227353

Si vous utilisez bootstrap (j'utilise la version 4.0), n'hésitez pas à essayer le code suivant.

<input data-toggle="tooltip" data-placement="top" title="This is the text of the tooltip" value="44"/>

data-placement peut être haut, droite, bas ou gauche

1
Kushan Randima

Outre HTML 5 data-tip Vous pouvez également utiliser css pour créer une info-bulle totalement personnalisable qui sera utilisée n'importe où dans votre balisage.

Styles

    /* ToolTip CSS classses */ 
.tooltip {
display: inline-block;    
}
.tooltip .tooltiptext {
    margin-left:9px;
    width : 320px;
    visibility: hidden;
    background-color: #FFF;
    border-radius:4px;
    border: 1px solid #aeaeae;
    position: absolute;
    z-index: 1;
    padding: 5px;
    margin-top : -15px; /* according to application */ 
   opacity: 0;
    transition: opacity 1s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

[~ # ~] html [~ # ~] 

<div class="tooltip">Hover Me
      <span class="tooltiptext">
        Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit,
        sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua.  </span>
    </div>

Codepan

1
Partha Roy

<input type="text" placeholder="specify">

Ceci ajoute "spécifiez" comme texte d'info-bulle dans la zone de saisie.

0
Amit Kharel