Pages

▼

Tuesday, 4 January 2011

Adding tooltips to your APEX report

There are a number of ways to publish tooltips in your application, many of them much more verbose than they need to be.

Some of them implement fairly fancy JavaScript and CSS, but there is a simple way to plug in the default tooltip behaviour into your Apex reports.

When you edit your report column attributes, add the following code into the HTML expression.

<span title="#MY_TOOLTIP_COLUMN#">#MY_COLUMN#</span>

These attributes typically have decent help in regard to the sort of coding examples you can apply.
So this setup places the data from the selected column my_tooltip_column, and displays the value in my_column as you'd normally expect.

And is the display from Google Chrome:
Simple but effective - and flexible.

See a variation on this example here.

8 comments:

  1. Unknown4 January 2011 at 13:13:00 GMT+8

    Thanks for the tip. This helped me alot.

    ReplyDelete
  2. Scott Wesley4 January 2011 at 14:09:00 GMT+8

    Sometimes it's just the little things ;-)

    ReplyDelete
  3. Przemysław Staniszewski (Przemek)4 January 2011 at 20:56:00 GMT+8

    Nice tip. I love simple and useful ideas without tons of scripts and workarounds. Thanks!

    ReplyDelete
  4. Anonymous26 May 2011 at 21:26:00 GMT+8

    Thank you very much for this very useful tip.
    Steffy

    ReplyDelete
  5. Unknown1 July 2015 at 00:05:00 GMT+8

    Do you know if it's possible to add an image instead of a text message?

    ReplyDelete
  6. Scott Wesley2 July 2015 at 12:26:00 GMT+8

    No doubt this could be done with a more powerful tooltip plugin, but this is an old post using native HTML. Google something not specific to APEX

    ReplyDelete
  7. Unknown27 May 2016 at 00:52:00 GMT+8

    Hi Scott,

    Could you please help me on my below tooltip requirement.

    My field 'EMP_DESCRIPTION' is text format in tabular form.
    I worked out above tool tip solution for a tabular form, but the problem I am facing is when I edit the column and paste the span title code in HTML Expression of the column, my field is converting into display only,but tooltip is working and showing column value in tooltip.


    I need the solution such a way that when I apply tool tip my field does not change and tool tip should show the content(value) of that column.

    Thanks in advance

    Regards,
    Antim

    ReplyDelete
  8. Scott Wesley1 June 2016 at 20:06:00 GMT+8

    Try adding just the title="" tag as a custom attribute on the column instead. By using the HTML expression, you're overwriting the default tabular functionality. Otherwise, you'd need to use apex_item.text() within your SQL.

    Try ask on the OTN forum for APEX if you continue to have trouble.

    You may also like to read this
    http://www.apex-at-work.com/2016/05/using-dynamic-tooltips-in-your.html

    ReplyDelete