Tuesday, July 20, 2010

Dojo Tooltip on XPages

The following code fragment when copy pasted into an xpage shall show you how dojo tool tips (as in image) work on XPages.


Step 1: Include the following style to the xpage
      @import "../resources/dojo.css";
      @import "../dijit/themes/tundra/tundra.css";

Step 2: Add the inclusion of the dojo.xd.js to the XPage as mentioned below 
    <script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>

Step 3: Associate the following script with the XPage
      dojo.require("dojo.parser");
      dojo.require("dijit.Tooltip");

 Step 4: Add the following html code to the XPage
    <span id="site1">Roseindia.net</span>
    <div dojoType="dijit.Tooltip" connectId="site1"
label="This is a software developement company!">
    </div>
  
    <br/>
    
    <xp:inputText id="textBox1"></xp:inputText>
    <div dojoType="dijit.Tooltip" connectId="#{id:textBox1}"
label="This is a Text field!">
<xp:panel style="background-color:rgb(0,0,255)">
abcdefghijklmn
</xp:panel>
    </div>
    
    <br/><br/>
    <span id="site2">Newstrackindia.com</span>
    <div dojoType="dijit.Tooltip" connectId="site2" label="This is a news publishing site!">    </div>

Step 5: Now preview the page and see how it works on the browser

Hope this helps :)

6 comments:

  1. next time hit the ctrl-shift-F in source mode to reformat the code?

    ReplyDelete
  2. Thanks for the Tip. I was looking for that a long time :)

    ReplyDelete
  3. Karthikeyan , this is not working ...

    ReplyDelete
  4. Well post your code if possible, will try to check whats wrong with that

    ReplyDelete
  5. Hi karthik can u publish this by using extension library tool tip control

    ReplyDelete
  6. Hi Karthik, thank you for this one and the other tips.
    I am using extension library tooltip and would like to style it.. like bold letters and change backgroud colour. Any idea is appreciated. Thank you.

    ReplyDelete