Question

让我解释一下我在做什么：我会浏览一些字符串数组，并将每个字符串添加到<li>元素和某个类中以更改其颜色。
所有这些<li>元素都会附加到<ul>元素，然后将其设置为title元素的＆＃34; <label>＆＃34; -property值。

有道理吗？：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

您不能在（本机）工具提示中使用HTML。相反，您可能希望使用项目符号＆＃34;•＆＃34;以纯Unicode形式创建列表。和换行符
，如：

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

如果您还需要更多内容，则必须考虑自行显示工具提示，而不是依赖于浏览器，例如：使用Bootstrap工具提示（如果您只需要设置样式）：

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

如果您需要完整的HTML内容，或者使用像Overlib这样更复杂的工具提示库。

Answer 2

不使用.prop("title"...)，而是使用.attr("title"...。

将样式<ul>设置为标题值

2 个答案: