{"id":141,"date":"2012-07-24T19:37:30","date_gmt":"2012-07-24T18:37:30","guid":{"rendered":"http:\/\/www.psinke.nl\/wordpress\/?p=141"},"modified":"2016-09-27T08:47:57","modified_gmt":"2016-09-27T06:47:57","slug":"adding-custom-tooltips-to-apex-with-qtip2","status":"publish","type":"post","link":"http:\/\/www.psinke.nl\/blog\/adding-custom-tooltips-to-apex-with-qtip2\/","title":{"rendered":"Adding custom tooltips to Application Express with qTip2"},"content":{"rendered":"<div class=\"713e806d42c51d8462bbb5f4c1155083\" data-index=\"1\" style=\"float: none; margin:0px;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4223201538046844\";\r\n\/* standaardblok *\/\r\ngoogle_ad_slot = \"9522527129\";\r\ngoogle_ad_width = 320;\r\ngoogle_ad_height = 50;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<p>A question often asked by users, is the addition of custom tooltips with extended functions (like line breaks or formatting) to Application Express. There is no default functionality in Apex for that, other than the standard\u00a0<em>alt\u00a0<\/em>or\u00a0<em>title\u00a0<\/em>tag in HTML, which I think is rather boring and not so flexible.<\/p>\n<p>There is a more versatile and nice looking alternative for that, called <a title=\"qTip2\" href=\"http:\/\/qtip2.com\/\" target=\"_blank\">qTip2<\/a>. It&#8217;s an extension for JQuery, which is already incorporated in Apex since version 4.0.<\/p>\n<p>I found it a little challenging to get qTip2 working in Apex, so here&#8217;s a how-to for you.<\/p>\n<ol>\n<li>Download the javascript code at <a title=\"Craigsworks qTip2\" href=\"http:\/\/qtip2.com\/download\" target=\"_blank\">craigsworks<\/a>. The download contains a file with Javascript code and a CSS file.<\/li>\n<li>Upload the two files (you can choose a minified or a human readable version) to your application&#8217;s Shared Components. There are sections for Cascading Style Sheets and Static Files (for the javascript) in the Files part.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-149 size-medium\" title=\"1-sharedcomponents\" src=\"http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/1-sharedcomponents-300x218.png\" width=\"300\" height=\"218\" srcset=\"http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/1-sharedcomponents-300x218.png 300w, http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/1-sharedcomponents.png 311w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<li>You need to include the javascript and CSS in your Apex page (or on page 0 to have them linked everywhere in your Application).<\/li>\n<li>go to the Edit Page section and add this to the HTML Header Atribute :\n<pre>&lt;link type=\"text\/css\" rel=\"stylesheet\" href=\"#WORKSPACE_IMAGES#jquery.qtip-2.0.0.css\" \/&gt;<\/pre>\n<\/li>\n<li>Add this to the Footer Text Attribute a little lower:\n<pre>&lt;script type=\"text\/javascript\" src=\"#APP_IMAGES#jquery.qtip.js\"&gt;&lt;\/script&gt;<\/pre>\n<\/li>\n<li>\u00a0And add this code to the Function and Global Variable Declaration. It replaces the standard title attributes with the qTip attribute. Mind you: <em>all\u00a0<\/em>title attributes on the page. That&#8217;s ok, it ensures a consistent look of your tooltips on the page.\n<pre>$(document).ready(function()\r\n{\r\n $('a[title]').qtip();\r\n});\r\nYour page now looks like this:\r\n<a href=\"http:\/\/www.psinke.nl\/wordpress\/wp-content\/uploads\/2012\/07\/2-page_edit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-148\" title=\"2-page_edit\" src=\"http:\/\/www.psinke.nl\/wordpress\/wp-content\/uploads\/2012\/07\/2-page_edit.png\" alt=\"\" width=\"581\" height=\"608\" srcset=\"http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/2-page_edit.png 726w, http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/2-page_edit-286x300.png 286w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/a><\/pre>\n<\/li>\n<li>Now let&#8217;s give it a try. Create a new Text item on your page, and put this in the Label attribute:\n<pre>&lt;a href=\"#\" title=\"Your &lt;i&gt;custom&lt;\/i&gt; label Tooltip\"&gt;A tooltip label&lt;\/a&gt;<\/pre>\n<\/li>\n<li>And look at the result:<\/li>\n<\/ol>\n<p><a href=\"http:\/\/www.psinke.nl\/wordpress\/wp-content\/uploads\/2012\/07\/3-tooltip-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-147 size-full\" title=\"3-tooltip example\" src=\"http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/3-tooltip-example.png\" width=\"305\" height=\"93\" srcset=\"http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/3-tooltip-example.png 305w, http:\/\/www.psinke.nl\/blog\/wp-content\/uploads\/2012\/07\/3-tooltip-example-300x91.png 300w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/a><\/p>\n<p>This is a basic example of what you can do with a little help from third party javascript libraries, in this case JQuery with qTip2. Take a look at the examples at the qTip2 website, there is a lot you can change e.g. background colours, fade effects and positioning.<\/p>\n<p>Of course you can also use the syntax used in step 7 in other parts of your page, like report headers, poplists or just plain text.<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>a basic example of what you can do with qTip2 in Oracle Application Express to spice up your UI. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[141,3,121,192],"tags":[130,131,132,48,111,137,142,143,6,11,144,145,49],"class_list":["post-141","post","type-post","status-publish","format-standard","hentry","category-apexapplication-express","category-oracle-blog","category-tips-and-tricks","category-web-software-development","tag-apex","tag-application-express","tag-development","tag-guidelines","tag-how-to","tag-html","tag-javascript","tag-jquery","tag-oracle","tag-programming","tag-qtip2","tag-tooltip","tag-webdesign"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":5,"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":555,"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions\/555"}],"wp:attachment":[{"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.psinke.nl\/blog\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}