使用options.items vs title的JQuery UI工具提示扩展

Question

我在JQuery UI工具提示小部件中编写了以下扩展，允许工具提示具有从HTMLElement的html获取其内容的上下文。 但是，我对'title'属性进行了硬编码，但我想使用options.items中定义的任何属性。 例如，如果他们希望工具提示使用alt标记，则扩展会使用html内容填充该属性。

另外我正在寻找正确转义contentId字符串连接的jquery ui方法

$(function() {
    (function() {
        var cache = {};
        $.widget("custom.tooltipContent", $.ui.tooltip, {
            _init: function() {
                this._super();

                this.options.content = function() {
                    return $(this).attr("title");
                };

                this.element.attr("title", function() {
                    var contentId = $(this).attr("data-tooltip-content");

                    if (!cache[contentId]) {
                        cache[contentId] = $("[data-tooltip-content-id=" + contentId + "]").remove().html();
                    }

                    return cache[contentId];
                });
            }
        });
    })();
});

http://jsfiddle.net/5d7sqx89/1/

Answer 1

我建议您使用新选项，而不是标题或项目选项。 你可以称之为itemsData。 这是为了避免将项目的内容解析为选择器。

$("span").tooltipContent({
      itemsData: "data-tooltip-content",
      show: {
          effect: "slideDown",
          delay: 50
      }
 })

itemsData：根据您的模式显示的数据的选择器：

     data-tooltip-content  --> data-tooltip-content-id

 (function () { $.widget("custom.tooltipContent", $.ui.tooltip, { _init: function () { this._super(); var _self = this; var datasetName = 'tooltipContent'; // this in order to fire always content function... _self.options.items = (_self.options.items.indexOf('[title]') != -1) ? '[data-tooltip-content]' : _self.options.items; // normalize itemsData _self.options.itemsData = _self.options.itemsData || "data-tooltip-content"; // get the html to be displayed later and save it into a data attribute var contentSelector = "[" + _self.options.itemsData + "-id=" + _self.element.data(datasetName) + "]"; _self.element.data(datasetName, $(contentSelector).html()); this.options.content = function () { return _self.element.data(datasetName); }; } }); })(); $("span").tooltipContent({ itemsData: "data-tooltip-content", show: { effect: "slideDown", delay: 50 } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <span id="test1" data-tooltip-content="x">Help 1</span> <span id="test2" data-tooltip-content="x">Help 1</span> <span id="test3" data-tooltip-content="y">Help 2</span> <span id="test4" data-tooltip-content="y">Help 2</span> <div style="display:none" data-tooltip-content-id="x"> Shared content for <b>help 1</b> </div> <div style="display:none" data-tooltip-content-id="y"> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </div> 

另一种方法可以基于引导按钮如何打开模态。 现在，您的data-tooltip-content属性必须包含要显示的数据的选择器：

<span id="test1" data-tooltip-content="#x">Help 1</span>
<span id="test2" data-tooltip-content="#x">Help 1</span>
<span id="test3" data-tooltip-content="#y">Help 2</span>
<span id="test4" data-tooltip-content="#y">Help 2</span>

<div id="x" style="display:none">
    Shared content for <b>help 1</b>
</div>

<div id="y" style="display:none">
    <table style="width:100%">
.......................

现在代码更容易了。

 (function () { $.widget("custom.tooltipContent", $.ui.tooltip, { _init: function () { this._super(); var _self = this; var datasetName = 'tooltipContent'; // this in order to fire always content function... _self.options.items = (_self.options.items.indexOf('[title]') != -1) ? '[data-tooltip-content]' : _self.options.items; // get the html to be displayed later and save it into a data attribute var html = ''; if (_self.options.itemsData === undefined) { html = _self.element.attr('title') || ''; } else { html = $(_self.element.data(datasetName)).html(); } _self.element.data(datasetName, html); this.options.content = function () { return _self.element.data(datasetName); }; } }); })(); $("span").tooltipContent({ items: "span[id^=test]", // optional itemsData: "data-tooltip-content", show: { effect: "slideDown", delay: 50 } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <span id="test1" data-tooltip-content="#x">Help 1</span> <span id="test2" data-tooltip-content="#x">Help 1</span> <span id="test3" data-tooltip-content="#y">Help 2</span> <span id="test4" data-tooltip-content="#y">Help 2</span> <div id="x" style="display:none"> Shared content for <b>help 1</b> </div> <div id="y" style="display:none"> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </div> 

Answer 2

我不确定这是否需要是一个小部件。 我会做以下事情：

 $(function() { $("span").tooltip({ items: "[data-tooltip-rel]", content: function() { var id = $(this).attr("data-tooltip-rel"); var cont = $("[data-tooltip-content-id='" + id + "']"); return cont.html(); } }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <span id="test" data-tooltip-rel="x">Help 1</span> <span data-tooltip-rel="x">Help 1</span> <span data-tooltip-rel="y">Help 2</span> <span data-tooltip-rel="y">Help 2</span> <div style="display:none" data-tooltip-content-id="x"> Shared content for <b>help 1</b> </div> <div style="display:none" data-tooltip-content-id="y"> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </div> 

如果您觉得需要自定义小部件，则可以执行此操作。

 $(function() { $.widget("custom.tooltipContent", $.ui.tooltip, { options: { items: "[data-tooltip-rel]", content: function() { return $("[data-tooltip-content-id='" + $(this).attr("data-tooltip-rel") + "']").html(); } } }); $("span").tooltipContent(); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <span id="test" data-tooltip-rel="x">Help 1</span> <span data-tooltip-rel="x">Help 1</span> <span data-tooltip-rel="y">Help 2</span> <span data-tooltip-rel="y">Help 2</span> <div style="display:none" data-tooltip-content-id="x"> Shared content for <b>help 1</b> </div> <div style="display:none" data-tooltip-content-id="y"> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> </div> 

希望有所帮助。