I'm trying to display a tooltip to my custom View column; ideally I'd like to use the Tooltip from ExtLib; however, I'm facing issues with its display since I'm not using oneUI themes; I'm using Bootrap 3.
I tried adding the css for dijitTooltip, but still the display is not working.
.dijitTooltip {
position: absolute;
z-index: 2000;
display: block;
left: 0;
top: -10000px;
overflow: visible;
}
.dijitTooltipRight { padding-left: 14px; }
My next attempt is using tooltip from Bootstrap; it works fine if I use simple text for tooltip content; however, I need to display dynamic content (using SSJS to get additional view information).
So I tried using data-html="true" and 'data-tile' or just 'title' attributes.
The only way I get it working is by using 'title', but the content is display as plain text and not as HTML.
<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>
Any ideas how can I solve this?
UPDATE: This is how I solved it:
$(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>