2

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.

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>

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>

enter image description here

1 Answer 1

1

Without diving into your own code I believe you're missing the function in bootstrap that makes the tooltip work.

I added the class="tip" to all my tooltips with this function

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

You can find a working example on the table header in the first fieldset. Working tooltip example

1
  • Looks like html content within tooltip requires $(<selector>).popover() or $(<selector>).tooltip() It's working now. see my question update for final code.
    – PSolano
    Apr 16, 2014 at 21:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.