Ayuda en la programación, respuestas a preguntas / Jquery / jQuery: no se puede hacer que el complemento de información sobre herramientas funcione - jquery, jquery-plugins, jquery-tooltip

jQuery: no se puede conseguir que el complemento de información sobre herramientas funcione - jquery, jquery-plugins, jquery-tooltip

Estoy tratando de usar este complemento de información sobre herramientas: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/. Parece que no puedo hacer que funcione.

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

Lo pruebo en un ejemplo simple:

clientside.js:

$(document).ready(function () {

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

El html objetivo:

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

Lamentablemente, no pasa nada. ¿Qué estoy haciendo mal?

Respuestas

1 para la respuesta № 1

Tu necesitas un title Atributo en sus elementos para obtener la información sobre herramientas, así:

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

Puedes ver una demostración aquí

También asegúrese de incluir el archivo CSS, o tener CSS propio para diseñar la información sobre herramientas, la hoja de estilo predeterminada que incluye el complemento de información sobre herramientas es:

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