Reputation: 39384
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:
$("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:
(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
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