在Enyo中允許ToolTip的HTML內容

Question

我正在使用工具提示，當用戶將鼠標懸停在某個圖標按鈕上時，我的要求是在工具提示中逐行顯示更多詳細信息。 目前，我正在嘗試這樣：

{kind: "moon.TooltipDecorator", components: [
                    {kind: "moon.IconButton", src: "$lib/moonstone/samples/assets/icon-button-enyo-logo.png"},
                    {kind: "moon.Tooltip", name:'info', floating: true, contentUpperCase: false,allowHtml: true, content: "Floating tooltip <br>for an IconButton."}
                ]
}

但這就像對待字符串一樣對待HTML內容。 我嘗試動態設置，但結果相同。 下面我試過了：

this.$.info.setContent('Fare Charges'+ "<span style='border:1px solid'"+flightsData[0].price+'</span><br>'+'<span>Some more data</span>');

有什么方法可以實現？

Answer 1

moon.Tooltip設計為僅一行文本。 如果您需要多條線，則可以基於moon.Tooltip創建自己的工具提示。

enyo.kind({
    name: 'my.Tooltip',
    kind: 'moon.Tooltip',
    published: {
        allowHtml: false
    },

    allowHtmlChanged: function() {
        this.$.client.set('allowHtml', this.allowHtml);
    },

    create: function () {
        this.inherited(arguments);
        this.allowHtmlChanged();
    },

});

enyo.kind({
    name: "App",
    components: [
        {kind: "moon.TooltipDecorator", components: [
                    {kind: "moon.IconButton", src:   "$lib/moonstone/samples/assets/icon-button-enyo-logo.png"},
                    {kind: "my.Tooltip", name:'info', floating: true, contentUpperCase: false, allowHtml: true, content: "Floating tooltip <br>for an IconButton."}
                ]
        }
     ]
});

new App().renderInto(document.body);

您還需要覆蓋.moon-tooltip-label CSS類：

.moon-tooltip-label {
    height:auto;
}