允许 Itemp 在 Enyo 中使用 HTML 内容

Allow HTML content for ToolTip in Enyo

本文关键字：HTML 内容 Itemp Enyo 允许      更新时间：2023-09-26

我正在研究工具提示，当用户将鼠标悬停在某些图标按钮上时，我的要求是在工具提示中逐行显示更多详细信息。目前，我正在尝试这样做：

{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>');

有什么办法可以实现吗？

月亮。工具提示设计为仅是一行文本。如果需要多行，可以基于moon创建自己的工具提示。工具提示。

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;
}
相关文章：