javascript - 将样式化的 设置为标题值

Question

让我解释一下我在做什么:我正在检查一些字符串数组，每个字符串都被添加到 <li> 中。元素和某个类来改变它的颜色。
所有这些<li>元素被附加到 <ul>然后将其设置为 title 的“<label>”-属性值元素。

有道理吗？ :D

我的工具提示中没有一个很好的列表，而是得到了这样的东西:
(请忽略没有 <ul> 元素，我已经修复了)

以下是此类标签的示例(直接从 Chrome 复制outerHTML):

<label data-toggle="tooltip" data-html="true" data-placement="bottom" class="btn btn-default" title="<ul><li class=&quot;green&quot;>Tequila</li><li class=&quot;green&quot;>Gin</li></ul>">Angel<input type="radio" id="cocktails" name="cocktail" value="angel"></label>

我以为data-html="true"解决了这个问题，但在我的情况下却没有。

底部.prop("title", tooltipElement.html())我正在设置标题。我不知道问题出在哪里，我已经尝试了很多东西......我觉得 ' 有问题或" ...但我现在不知道如何解决它。

知道如何以最好的方式做到这一点吗？
我的代码:

var tooltipElement = $("<ul></ul>");
        for (var u = 1; u < nameAndBottlesArr.length; u++)
        {
            var bottleAndBool = nameAndBottlesArr[u].split('=');
            var bottleName = bottleAndBool[0];
            var bottleBool = bottleAndBool[1];
            var colorClass = (bottleBool === '1') ? 'green' : 'red';
            var listEntry = $("<li></li>").addClass(colorClass).text(bottleName);
            tooltipElement.append(listEntry);
        }

        var cocktailName = nameAndBottlesArr[0];
        var alreadyListed = $('.btn-group').find('[value="' + cocktailName + '"]')[0];

        //Append Radiobutton for each Cocktail, disable unavailable cocktail-radios
        if (!alreadyListed) {
            var $radio = $('<input>').attr({
                type: 'radio',
                id: 'cocktails',
                name: 'cocktail',
                value: cocktailName
            });

            var $label = $('<label data-toggle="tooltip" data-html="true" data-placement="bottom"></label>')
                    .addClass("btn btn-default")
                    .prop("title", tooltipElement.html())
                    .text(cocktailName.replace(/\w\S*/g, capitalize));

            if (!sortedCocktails[i].availability) {
                $label.addClass("disabled");
            }
            $label.append($radio);
            $(".btn-group").append($label);
        }

Answer 1

您不能在( native )工具提示中使用 HTML。相反，您可能希望使用项目符号“•”和换行符 以纯 Unicode 格式创建列表，例如:

<label title="• line 1&#10;• line 2">

如果您需要更多内容，您必须考虑自己显示工具提示，而不是依赖于浏览器，例如使用 Bootstrap 工具提示(如果您只需要设置它们的样式):

https://getbootstrap.com/javascript/#tooltips

或者如果您需要内部完整的 HTML，则可以使用一些更复杂的工具提示库，例如 Overlib。