Question

我正在尝试向自定义View列显示工具提示;理想情况下，我想使用ExtLib的工具提示;但是，由于我没有使用oneUI主题，因此我面临显示问题;我正在使用Bootrap 3。

我尝试为dijitTooltip添加css，但显示仍无效。

.dijitTooltip {
    position: absolute;
    z-index: 2000;
    display: block;
    left: 0;
    top: -10000px;
    overflow: visible;
}

.dijitTooltipRight { padding-left: 14px; }

我的下一次尝试是使用Bootstrap的工具提示;如果我使用简单的文本作为工具提示内容，它工作正常;但是，我需要显示动态内容（使用SSJS获取其他视图信息）。

所以我尝试使用data-html =“true”和“data-tile”或只是'title'属性。

我使用它的唯一方法是使用'title'，但内容显示为纯文本而不是HTML。

enter image description here

<xp:viewColumn id="viewColumn10">
            <xp:this.facets>
                <xp:viewColumnHeader xp:key="header"
                    id="viewColumnHeader10">
                </xp:viewColumnHeader>
            </xp:this.facets>
            <xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value>
            <xp:image url="/iconInfo16.png" id="imgInfo">
                <xp:this.attrs>
                    <xp:attr name="data-toggle" value="tooltip"></xp:attr>
                    <xp:attr name="data-html" value="true"></xp:attr>
                    <xp:attr name="data-title">
                        <xp:this.value><![CDATA[#{javascript:"<b>html</b> code"}]]></xp:this.value>
                    </xp:attr>
                    <!--<xp:attr name="title" value="test"></xp:attr>-->
                </xp:this.attrs>
            </xp:image>             
        </xp:viewColumn>

我有什么想法可以解决这个问题吗？

更新：这就是我解决它的方法：

$(document).ready( 
function() {
    $(".tip").popover()})


<xp:viewColumn id="viewColumn10">
            <xp:this.facets>
                <xp:viewColumnHeader xp:key="header"
                    id="viewColumnHeader10">
                </xp:viewColumnHeader>
            </xp:this.facets>
            <xp:this.value><![CDATA[#{javascript:""}]]></xp:this.value>
            <xp:image url="/iconInfo16.png" id="imgInfo"
                styleClass="tip">
                <xp:this.attrs>
                    <xp:attr name="data-toggle" value="tooltip"></xp:attr>
                    <xp:attr name="data-html" value="true"></xp:attr>
                    <xp:attr name="data-trigger" value="hover"></xp:attr>
                    <xp:attr name="data-original-title" value="Special Comments"></xp:attr>
                    <xp:attr name="data-content">
                        <xp:this.value><![CDATA[#{javascript:rowData.getColumnValue("CourseName");}]]></xp:this.value>
                    </xp:attr>

                </xp:this.attrs>
            </xp:image>
        </xp:viewColumn>

enter image description here

Answer 1

如果不深入研究自己的代码，我相信你错过了使用工具提示工作的bootstrap功能。

我添加了class =＆＃34; tip＆＃34;使用此功能的所有工具提示

  $(function ()
  $(".tip").popover();
  });

您可以在第一个字段集中的表头上找到一个工作示例。 Working tooltip example

将Bootstrap工具提示添加到视图列

我有什么想法可以解决这个问题吗？

1 个答案: