2010-05-13 3 views
0

J'essaie d'utiliser ce plugin tooltip: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/. Je n'arrive pas à le faire fonctionner.jQuery: Impossible de faire fonctionner le plugin tooltip

<head> 
    <script type="text/javascript" src="/static/JQuery.js"></script> 
    <script type="text/javascript" src="/static/jquery-ui-1.8.1.custom.min.js"></script> 
    <script type="text/javascript" src="/static/jquery.json-2.2.min.js"></script> 
    <script type="text/javascript" src="/static/jquery.form.js"></script> 
    <script type="text/javascript" src="/static/js-lib/jquery.bgiframe.js"></script> 
    <script type="text/javascript" src="/static/js-lib/jquery.delegate.js"></script> 
    <script type="text/javascript" src="/static/js-lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="/static/jquery.tooltip.js"></script> 
    <script type="text/javascript" src="/static/sprintf.js"></script> 
    <script type="text/javascript" src="/static/clientside.js"></script> 
</head> 

Je l'essayer dans un exemple simple:

clientside.js:

$(document).ready(function() { 

    $("#set1 *").tooltip(); 
}); 

Le code HTML cible:

<div id="set1"> 
       <p id="welcome">Welcome. What is your email?</p> 
       <form id="form-username-form" action="api/user_of_email" method="get"> 
        <p> 
        <label for="form-username">Email:</label> 
        <input type="text" name="email" id="form-username" /> 
        <input type="submit" value="Submit" id="form-submit" /> 
        </p> 
       </form> 
       <p id="msg-user-accepted"></p> 
      </div> 

Malheureusement, rien ne se passe. Qu'est-ce que je fais mal?

Répondre

1

Vous avez besoin d'un attribut title sur vos éléments pour obtenir l'info-bulle, comme ceci:

<input type="text" name="email" id="form-username" title="My Tooltip" /> 

You can see a demo here

Assurez-vous également que vous incluez the CSS file, ou ont CSS de votre propre au style de la tooltip, la feuille de style par défaut que le plugin tooltip inclut est:

#tooltip { 
    position: absolute; 
    z-index: 3000; 
    border: 1px solid #111; 
    background-color: #eee; 
    padding: 5px; 
    opacity: 0.85; 
} 
#tooltip h3, #tooltip div { margin: 0; } 
+0

Cela ne fonctionne plus! Pourquoi? –

Questions connexes