J'ai un formulaire avec des info-bulles qui apparaît lorsque la souris survole l'étiquette. J'aimerais que la même info-bulle (même position, même texte) apparaisse également sur le focus du champ de saisie associé.

<div>
    <div title='hello world'>hello world</div>
    <div> <input name="test" /></div>
</div>

Je ne veux pas ajouter de title="..." dans le <input> car dans mon scénario réel, l'infobulle est plus grande et cela rendrait l'interface utilisateur désordonnée, donc je veux déclencher l'info-bulle de {{{ X2}} sur le focus du <div><input></div>

J'ai créé un exemple factice ici: http://jsfiddle.net/03nm70x4/

0
IggY 14 juil. 2015 à 11:58

3 réponses

Meilleure réponse

J'espère que cela ne vous dérange pas d'utiliser une bibliothèque pour y parvenir. Au lieu de bibliothèques indépendantes / indépendantes, vous pouvez utiliser la fonctionnalité d'info-bulle de jQueryUI.

Info-bulle jQueryUI

<div>
    <div id="label" title='hello world'>hello world</div>
    <div> <input id="test-input" name="test" /></div>
</div>

$(function() {
    $( document ).tooltip();
});

$('#test-input').hover(function(){
    $( "#label" ).tooltip( "open" );
});
1
alexan 14 juil. 2015 à 09:16

Fiddle mis à jour

$(document).ready(function() {
    $(document).tooltip({
        items: "input",
        content : $('div[title="this is the title of hello world"]').prop('title'),
    });
});

Faites-moi savoir si cela fonctionne ...

2
Abhishek 14 juil. 2015 à 09:14

Ajoutez le titre à votre parent div

<div title='this is the title of hello world'>
<label for="test" >hello world</label>
    <input id="test"  />
</div>
1
piscator 14 juil. 2015 à 09:11