Thanks to all who attended today's OpenText Support Community Event: Customer Contributions to Knowledge Program.

A recording of the event and the next steps to start your contributions can be found here:

Customer Contributions to Knowledge Presentation

Let's get started!

Customizing tool tip fonts in Open Source BIRT Reports

Currently, in Open Source BIRT reports there is no way tool tip can be customized. The default font size could be too small for all users. However, it cannot be changed from the UI. This tip explains how to use the QTip libraries to integrate custom tool tip in BIRT Reports so that so that the font size and other properties can be customized as needed for business requirements.

Comments

  • Integration requires the following Qtip library and CSS( stylesheet)

    jquery.qtip.min.js
    jquery.qtip.min.css

    These libraries can be downloaed from the following location:
    http://qtip2.com/download

    Note: While downloading the libraries makes sure "Viewport adjustment" is seleced from "Choose additional features".

    This feature is required to auto adjust the tooltip based on the window location

    Steps to integrate the QTip libraries in BIRT

    1. Add the libraries and stylesheet to the BIRT report using head.js function in clientInitialize event under clientscripts.
      clientScripts event can be accessed from the top of the reports.
      head.js( "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js", function() { jQuery.noConflict(); jQuery(function ($) { head.js("https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.qtip.min.css", "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.qtip.min.js", function() { console.log("Done loading all"); //debugger; }); }); });

    2. Add a Text element in the Table header with the following JavaScript. This script goes through all DIV elements with

    class "qtiptext" and applies the QTip properties defined in library and stylesheet
    <script> console.log ('report starting 0...'); jQuery('.qtiptxt').each(function($) { console.log ('report starting 1...'); jQuery(this).qtip({position: {viewport: jQuery(window)}}); }); </script>
    3. Add Text elements with text set to HTML as needed. Add the below code and update as per the requirement.
    <DIV id="test1" href="#test" class="qtiptxt" title="The unique number of clients processed during the selected time period. Clients do not get counted more than once regardless of meeting count."> Total Unique Clients Meetings </DIV>
    Here "Total Unique Clients Meetings" is the text that will be displayed in report and text in title which is "The unique number of clients processed during the selected time period. Clients do not get counted more than once regardless of meeting count." will be displayed when the mouse is mover over the Text.

    Raj Jawahar

Sign In or Register to comment.