Struts2 : Comment faire pour afficher une info-bulle pour chaque option de liste déroulante dans une balise select?

J'ai cette struts2 balise select où les options sont une liste d'objets Item.
Disons que le Point de bean java de la classe a, les 3 suivants propriétés: itemId, itemLabel, itemDescription.

Ma balise select regarde aime ceci:

<s:select headerKey="" 
  headerValue="Select Item"
  list="myModel.itemsList"
  listKey="itemId"
  listValue="itemLabel"
  name="selectedItem" />

Je voudrais afficher une info-bulle pour chaque option dans le menu déroulant chaque fois que l'utilisateur les aspirateurs de plus de cette option. Le texte pour remplir l'info-bulle est stocké dans le itemDescription propriété de mon java bean classe

Je sais que vous pouvez donner un tooptip à la balise select, mais ce n'est pas ce dont j'ai besoin, car chaque option/item a une description différente.

Actuellement, j'ai un code javascript personnalisé info-bulle et je voudrais utiliser cette fonction, si possible. C'est la façon dont je voudrais utiliser la fonction si les articles sont listées dans un tableau: 

<td>
    <span class="tooltip" onmouseout="tooltip.hide();"
      onmouseover="tooltip.show('<s:property value="item.description" />');">
        <s:property value="item.label" />
    </span>
</td>

Quelqu'un sait quelle serait la meilleure solution pour montrer la description dans une info-bulle à chaque fois que l'utilisateur passe sur une option?

OriginalL'auteur Johnny | 2011-08-04

  1. 6

    Il y a un certain nombre de façons de faire ce que vous voulez. La manière la plus rapide pour moi serait juste l'écriture de code html:

        <select name="selectedItem">
        <s:iterator value="collectionOfSomething">
            <option value="<s:property value="valueToReturn"/>" title="<s:property value="toolTip"/>">
                <s:property value="itemInListToShow"/>
            </option>
        </s:iterator>
    </select>

    Ci-dessus utilise le html5, l'attribut title, la bonne chose à propos de ceci est que vous obtenez une info-bulle dans la plupart des navigateurs modernes sans javascript.

    Remplacer: "valueToReturn", "info-bulle" et "itemInListToShow" par le ognl expressions pour les valeurs de "collectionOfSomething"

    Une autre façon de résoudre ce serait avec jQuery (toute bibliothèque JS ferait) et serait quelque chose comme ça.

    1) Mettre une liste html sur la page avec l'outil de trucs mais en forme avec CSS, de sorte qu'il n'est pas visible.

    2) Utiliser jQuery (ou JS bibliothèque de préférence) pour lier une souris au-dessus d'événement pour chaque élément dans la liste déroulante, qui va montrer le bout de l'outil à partir de la même indice dans la liste cachée.

    Voir hoss la solution après le fait, Si vous allez avec un JS solution que j'avais modifier #2 pour laisser ivre gérer l'affichage, parce que c'est tellement cool. Bien que hors de vitesse, j'aurais quand même aller à droite jusqu'html solution.
    Hey, merci beaucoup de Quaternions. J'ai choisi la première mise en œuvre avec le html et le titre peuplée.

    OriginalL'auteur Quaternion

  2. 4

    Je vous suggère d'utiliser ivre, http://onehackoranother.com/projects/jquery/tipsy/ est la meilleure solution que j'ai trouvé, je l'utilise trop.

    Déclarer les chemins .js et .les fichiers css

    <link  href="${pageContext.request.contextPath}/resources/css/tipsy.css" type="text/css" />
    <link  href="${pageContext.request.contextPath}/resources/css/tipsy-docs.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/scripts/jquery.tipsy.js"></script>

 <script type='text/javascript'>
   $(function() {
    $('.example-1').tipsy();
    $('.north').tipsy({gravity: 'n', html: true });
    $('.south').tipsy({gravity: 's', html: true });
    $('.east').tipsy({gravity: 'e', html: true });
    $('.west').tipsy({gravity: 'w', html: true });
    $('.auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS, html: true});
    $('.example-fade').tipsy({fade: true, html: true});
    $('.example-custom-attribute').tipsy({title: 'id', html: true});
    $('.example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
    $('.example-fallback').tipsy({fallback: "Where's my tooltip yo'?" });
    $('.example-html').tipsy({html: true });
});
</script>

    Et la dernière chose, mettez votre choisir entre cette durée:

     <span class="south" style="cursor: pointer;" title=Your title"></span>

    L'attribut de classe dans cette période est pour l'info-bulle de l'alignement, très étrange, mais ça marche inversée. Pas un gros problème, si vous avez besoin d'aligner vers le nord, il suffit d'écrire au sud.

    Salut hoss, je ne suis pas sûr que vous avez compris ma question. Je ne veux pas que l'info-bulle de la zone de liste déroulante (balise select) mais pour chaque option. Dans votre exemple, je ne vois pas comment je peux faire de chaque option dans le menu déroulant ramasser l'info-bulle de la item.description propriété?
    +1 n'a Jamais regardé à peu pompette avant, c'est cool!

    OriginalL'auteur Denees

  3. 1

    À l'aide de jQuery, il peut être facilement résolu

    Appeler la fonction suivante dans l'interface utilisateur sur onmouseoverbutton événement

    fonction addTitleAttributes(valeur){

    $("#"+value+" option").each(function()
{
        $(this).attr('title',$(this).text());
});

    }

    Où la valeur transmise peut être l'id du bouton select

    C'est super simple, l'amour.
    J'obtiens l'erreur:- erreur de Syntaxe, non reconnu expression: #[objet] de l'option de la solution de ce??

    OriginalL'auteur user1846546