Miguel Moura
Miguel Moura

Reputation: 39384

JQuery Plugin with 2 Selectors

I created a JQuery tooltip plugin which can be used in two ways:

I would like to have another option:

How to change my plugin to also being able to do this? My current code is:

(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {
      content: "",
      class: "Tooltip",
      id: "Tooltip"
    };

    var options = $.extend({}, defaults, options);

    var tooltip;

    $(this).each(function () {

      var title = $(this).attr("title");
      if (title == undefined && options.content == "") return;

      $(this).mouseenter(function (e) {

        $(this).removeAttr("title")
        tooltip = "<div id='{id}' class='{class}'>{content}</div>"

        var content = options.content == "" ? title : options.content;
        tooltip = tootip.replace("{class}", options.class).replace("{id}", options.id).replace("{content}", content);

        $("body").append(tooltip);
        $("#" + options.id).fadeIn("fast");

      }), // Mouse Enter

      // Mouse Leave, Mouse Down and Mouse Move functions ...

    }
   }

Thank You!

Upvotes: 0

Views: 55

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Not going to rewrite the whole plugin but could add an option that returns content from page:

var defaults = {
      content: "",
      class: "Tooltip",
      id: "Tooltip",
      contentSource: 'title' /* "title" as default or "html" for in page*/
      htmlSource: function($el){
         /* write whatever traverse returns content wanted*/
         return  $el.siblings('div.foo').html();
      }
    };

Now when you set content check which source

/* should cache $(this) since using it numerous times*/
var $this=$(this)


var content;
if( options.contentSource !='title'){
   content=options.htmlSource($this);
}else{
  content= /* existing code*/
}

Usege:

$("table td.Task a.Menu", "li div.Menu").Tooltip({
      contentSource: 'html',
      htmlSource: function($el){            
          return  $el.parent().find('.someClass').html();
      }
});

Upvotes: 1

Related Questions