JQuery Plugin with 2 Selectors

JQuery Plugin with 2 Selectors

Hello,

I created a JQuery tooltip plugin which can be used in two ways:
  • The tooltip content is the title of the HTML anchor;
  • The tooltip content is passed as an option;
I would like to have another option:

  • The entire tooltip markup would be an element in the page.
          Let me give an example of what I am looking for:

  1.          $("table td.Task a.Menu", "li div.Menu").Tooltip();

           So every link Menu under "table td.Task" would fire a tooltip.

           The tooltip markup would be the div.Menu under the same LI of the a.Menu

           How to change my plugin to also being able to do this? My current code is:
  1. (function ($) {
  2.   $.fn.Tooltip = function (options) {
  3.     var defaults = {
  4.       content: "",
  5.       class: "Tooltip",
  6.       id: "Tooltip"
  7.     };
  8.     var options = $.extend({}, defaults, options);
  9.     var tooltip;
  10.     $(this).each(function () {
  11.       var title = $(this).attr("title");
  12.       if (title == undefined && options.content == "") return;
  13.       $(this).mouseenter(function (e) {
  14.         $(this).removeAttr("title")
  15.         tooltip = "<div id='{id}' class='{class}'>{content}</div>"
  16.         var content = options.content == "" ? title : options.content;
  17.         tooltip = tootip.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", content);
  18.         $("body").append(tooltip);
  19.         $("#" + options.id).fadeIn("fast");
  20.       }), // Mouse Enter
  21.       // Mouse Leave, Mouse Down and Mouse Move functions ...
  22.     }
  23.    }

Thank You,
Miguel