Question

我正在使用qtip jquery插件添加工具提示。我可以在整个网站上添加50-60个工具提示。

我现在发现这样做的方法是反复剪切/粘贴jquery代码。例如：

// First, setup a tool tip for 'Enter Username'.
$("input#user_login").qtip({
   content: 'Enter username',
   position: {
     corner: {
       target: 'rightMiddle',
       tooltip: 'leftMiddle'
     }
   },
   style: { 
     border: {
       width: 1,
       radius: 3,
       color: '#0066CC'
    },
    width: 200,
    name: 'blue'
  }   
});

现在，重复“名字”的所有内容。似乎毫无意义。

$("input#user_login").qtip({
   content: 'Enter First Name',
   position: {
     corner: {
       target: 'rightMiddle',
       tooltip: 'leftMiddle'
     }
   },
   style: { 
     border: {
       width: 1,
       radius: 3,
       color: '#0066CC'
    },
    width: 200,
    name: 'blue'
  }  
});

如何创建一个函数我可以将显示文本传递给？

Answer 1

作为通用解决方案，只要您想使用默认选项然后对其进行扩展，就可以在其上使用$.extend()，如下所示：

var qtip_options = {
   content: 'I'm a tooltip,
   position: {
     corner: {
       target: 'rightMiddle',
       tooltip: 'leftMiddle'
     }
   },
   style: { 
     border: {
       width: 1,
       radius: 3,
       color: '#0066CC'
    },
    width: 200,
    name: 'blue'
  }   
};

$("#user_login").qtip($.extend({}, qtip_options, { content: 'Enter username'});
$("#first_name").qtip($.extend({}, qtip_options, { content: 'Enter First Name'});

或者在你的情况下你做了很多，让我们使用一个插件，如下：

$.fn.myQtip = function(text) {
  return this.qtip($.extend({}, qtip_options, { content: text});
};

然后就这样称呼它：

$("#user_login").myQtip('Enter username');
$("#first_name").myQtip('Enter First Name');

Answer 2

function setupToolTip(jQueryElement, display) {
  jQueryElement.qtip({
     content: display,
     position: {
       corner: {
         target: 'rightMiddle',
         tooltip: 'leftMiddle'
       }
     },
     style: { 
       border: {
         width: 1,
         radius: 3,
         color: '#0066CC'
      },
      width: 200,
      name: 'blue'
    }   
  });
}

setupToolTip($("input#user_login"), 'Enter username');
setupToolTip($("input#user_first_name"), 'Enter First Name');

Answer 3

如果所有工具提示的所有其他选项（如样式和宽度）相同，我建议您更改插件代码中的默认值。这将允许您制作这样的工具提示：

$("input#user_login").qtip({content: "Enter username"});
$("input#user_password").qtip({content: "Enter password"});

Answer 4

您可以按类同时定位所有元素，而不是定位特定元素。然后，您可以隐藏HTML中的值。这样，您只需要一次调用来设置qTip，它就会自动找到您的内容。你永远不需要修改你的脚本，因为添加了更多的元素，只需给它们一个“hasTip”类，你就可以了。

$(".hasTip").qtip({
   content: $(this).next('.tipText').html(),
   ...

在HTML中（将此位置放在具有“hasTip”类的元素之后）：

<div class='tipText' style='display:none">First Name</div>

写一次，随处使用。

修改

尼克，你是对的，我的“这个”参考是错误的。我确实相信这样的工具中的“自我发现”。他们只是找到自己的内容，并在没有干预的情况下自我解决。

我不认为这是“标记矫枉过正”，而不仅仅是$("#user_login").qtip($.extend({}, qtip_options, { content: 'Enter username'});是“函数调用矫枉过正”。他们只是处理问题的不同方式。

我喜欢我的方法，因为我可以“包含并忘记”，而不必编写特定于元素的初始化。

如何创建“JQuery”函数调用并将数据传递给它们？

4 个答案: