我 - 有些stackoverflow用户帮助 - 使用Jquery和一般Javascript开发了这个工具提示脚本，
<script type="text/javascript">
$(document).ready(function(){
/*OPCIONES DEL PLUGIN*/
var selector = '.disparador'; //elemento que activará el tooltip
var tooltip = '.miTooltip'; //elemento con el contenido HTML a mostrar por el tooltip
var tiempo_espera = 0; //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
var seguir_raton = true; //booleana que determina si el tooltip debe seguir el movimiento del raton o no
var ajuste_top = 0; //distancia vertical de ajuste
var ajuste_left = 0; //distancia vertical de ajuste
var fade_time = 300; //tiempo de la transición de mostrar/ocultar
/*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/
/* Detectar que el raton pasa por encima */
$(selector).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip= disp.next(tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
//alert(new_content);
tip.html(new_content);
if(typeof t != 'undefined'){
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
}).fadeIn(fade_time);
});
/* En caso de que se mueva el raton */
$(selector).bind('mousemove', function(e){
if(seguir_raton==true){
var disp = $(this);
var tip= $(this).next(tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
});
}
});
$(selector).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
});
});
</script>
它在初始化时有一些变量，它们都是可选的，因为它们具有所有初始值，但我希望能够成为init的变量，
根据这个：tutorial我需要做类似的事情：
(function($){
$.fn.meliaTooltip = function(options){
// code will be added here.
}
})(jQuery);
但是我不确定我是否必须在那里设置代码以及如何准确定义选项（asume options是要用作我的变量的参数）
任何人都想给我一个推动力？
答案 0 :(得分：2)
它应该是这样的：
(function ($) {
$.fn.meliaTooltip = function (options) {
var defaults = {
tooltip: '.miTooltip',
tiempo_espera: 0,
seguir_raton: true,
ajuste_top: 0,
ajuste_left: 0,
fade_time: 300
};
var opts = $.extend(defaults, options);
$(this).each(function() {
$(this).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip = disp.next(opts.tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = '<span class="left"></span ><span class="contenido">' + tip_text + '</span ><span class="right"></span ><span class="bottom"></span >';
//alert(new_content);
tip.html(new_content);
if (typeof t != 'undefined') {
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
}).fadeIn(opts.fade_time);
});
$(this).bind('mousemove', function(e) {
if (opts.seguir_raton) {
var disp = $(this);
var tip = $(this).next(opts.tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
});
}
});
$(this).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('" + opts.tooltip + "').fadeOut(" + opts.fade_time + ")", opts.tiempo_espera);
});
});
};
})(jQuery);
用法：
$("#selector").meliaTooltip({
tooltip: '.miTooltip',
fade_time: 300
});
答案 1 :(得分：0)
试试这个
$.fn.meliaTooltip = function(options){
return this.each(function(){
/*OPCIONES DEL PLUGIN*/
//var selector = '.disparador'; //elemento que activará el tooltip
//You can take all the below settings from options param
var tooltip = '.miTooltip'; //elemento con el contenido HTML a mostrar por el tooltip
var tiempo_espera = 0; //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
var seguir_raton = true; //booleana que determina si el tooltip debe seguir el movimiento del raton o no
var ajuste_top = 0; //distancia vertical de ajuste
var ajuste_left = 0; //distancia vertical de ajuste
var fade_time = 300; //tiempo de la transición de mostrar/ocultar
/*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/
/* Detectar que el raton pasa por encima */
$(this).hover(function(e) {
/*Guardamos el selector del disparador y de tooltip en una variable*/
var disp = $(this);
var tip= disp.next(tooltip);
var tip_text = tip.html();
//alert(tip_text);
var new_content = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
//alert(new_content);
tip.html(new_content);
if(typeof t != 'undefined'){
/*reiniciamos tiempo_espera*/
clearTimeout(t);
}
$(tip).css({
/*colocamos el tooltip según el ratón y el tamaño del tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
}).fadeIn(fade_time);
});
/* En caso de que se mueva el raton */
$(this).bind('mousemove', function(e){
if(seguir_raton==true){
var disp = $(this);
var tip= $(this).next(tooltip);
$(tip).css({
/*Pues recolocamos el tooltip*/
left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
});
}
});
$(this).mouseout(function() {
/*añadimos tiempo_espera por si el usuario se sale sin querer*/
t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
});
});
};
用法
$("#testTooltip").meliaTooltip();