Tooltips for HTMLCheckMatrix

Generates tooltips on the columns labels of HTMLCheckMatrix.
Bug: 47094

Change-Id: I9670ecdc2cb553df07ee06e3b83b003382471d27

diff --git a/includes/HTMLForm.php b/includes/HTMLForm.php
index ad7574f..e4a77a0 100644 (file)
--- a/includes/HTMLForm.php
+++ b/includes/HTMLForm.php
@@ -1862,12 +1862,18 @@ class HTMLCheckField extends HTMLFormField {
  * are of the form "columnName-rowName"
  *
  * Options:
- *   columns:           Required list of columns in the matrix.
- *   rows:              Required list of rows in the matrix.
- *   force-options-on:  Accepts array of column-row tags to be displayed as enabled
- *                      but unavailable to change
- *   force-options-off: Accepts array of column-row tags to be displayed as disabled
- *                      but unavailable to change.
+ *   - columns
+ *     - Required list of columns in the matrix.
+ *   - rows
+ *     - Required list of rows in the matrix.
+ *   - force-options-on
+ *     - Accepts array of column-row tags to be displayed as enabled but unavailable to change
+ *   - force-options-off
+ *     - Accepts array of column-row tags to be displayed as disabled but unavailable to change.
+ *   - tooltips
+ *     - Optional array mapping row label to tooltip content
+ *   - tooltip-class
+ *     - Optional CSS class used on tooltip container span. Defaults to mw-icon-question.
  */
 class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
 
@@ -1944,8 +1950,21 @@ class HTMLCheckMatrix extends HTMLFormField implements HTMLNestedFilterable {
                }
                $tableContents .= Html::rawElement( 'tr', array(), "\n$headerContents\n" );
 
+               $tooltipClass = 'mw-icon-question';
+               if ( isset( $this->mParams['tooltip-class'] ) ) {
+                       $tooltipClass = $this->mParams['tooltip-class'];
+               }
+
                // Build the options matrix
                foreach ( $rows as $rowLabel => $rowTag ) {
+                       // Append tooltip if configured
+                       if ( isset( $this->mParams['tooltips'][$rowLabel] ) ) {
+                               $tooltipAttribs = array(
+                                       'class' => "mw-htmlform-tooltip $tooltipClass",
+                                       'title' =>  $this->mParams['tooltips'][$rowLabel],
+                               );
+                               $rowLabel .= ' ' . Html::element( 'span', $tooltipAttribs, '' );
+                       }
                        $rowContents = Html::rawElement( 'td', array(), $rowLabel );
                        foreach ( $columns as $columnTag ) {
                                $thisTag = "$columnTag-$rowTag";

diff --git a/resources/mediawiki/mediawiki.htmlform.js b/resources/mediawiki/mediawiki.htmlform.js
index 87529b4..ac6f2a1 100644 (file)
--- a/resources/mediawiki/mediawiki.htmlform.js
+++ b/resources/mediawiki/mediawiki.htmlform.js
@@ -125,4 +125,12 @@
                } );
        }
 
+       $( document ).ready( function() {
+               var $matrixTooltips = $( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
+               if ( $matrixTooltips.length ) {
+                       mw.loader.using( 'jquery.tipsy', function () {
+                               $matrixTooltips.tipsy();
+                       } );
+               }
+       } );
 }( mediaWiki, jQuery ) );

diff --git a/skins/common/images/question-small.png b/skins/common/images/question-small.png
new file mode 100644 (file)
index 0000000..590f0cb
Binary files /dev/null and b/skins/common/images/question-small.png differ

diff --git a/skins/common/images/question.svg b/skins/common/images/question.svg
new file mode 100644 (file)
index 0000000..2797305
--- /dev/null
+++ b/skins/common/images/question.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+        width="21.059px" height="21.06px" viewBox="0 0 21.059 21.06" enable-background="new 0 0 21.059 21.06" xml:space="preserve">\r
+<path fill="#575757" d="M10.529,0C4.715,0,0,4.714,0,10.529s4.715,10.53,10.529,10.53c5.816,0,10.529-4.715,10.529-10.53\r
+       S16.346,0,10.529,0z M10.527,16.767c-0.861,0-1.498-0.688-1.498-1.516c0-0.862,0.637-1.534,1.498-1.534c0.828,0,1.5,0.672,1.5,1.534\r
+       C12.027,16.078,11.355,16.767,10.527,16.767z M12.664,10.255c-0.723,0.568-1,0.931-1,1.739v0.5H9.459v-0.603\r
+       c0-1.517,0.449-2.136,1.154-2.688c0.707-0.552,1.139-0.845,1.139-1.637c0-0.672-0.414-1.051-1.24-1.051\r
+       c-0.707,0-1.328,0.189-1.982,0.638L7.479,5.346c0.861-0.604,1.93-1.034,3.342-1.034c1.912,0,3.516,1.051,3.516,3.066\r
+       C14.336,8.808,13.543,9.566,12.664,10.255z"/>\r
+</svg>\r

diff --git a/skins/common/shared.css b/skins/common/shared.css
index fb140b2..d946ce2 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -235,6 +235,32 @@ td.mw-label {
 .prefsection table.mw-htmlform-matrix {
        width: auto;
 }
+
+.mw-icon-question {
+       /* @embed */
+       background: url('images/question-small.png') no-repeat;
+       /* SVG support using a transparent gradient to guarantee cross-browser
+        * compatibility (browsers able to understand gradient syntax support also SVG)
+        * lifted from #pt-login css rule in skins/vector/screen.css */
+       /* @embed */
+       background: -webkit-linear-gradient(transparent, transparent), url('images/question.svg') no-repeat;
+       /* @embed */
+       background: linear-gradient(transparent, transparent), url('images/question.svg') no-repeat;
+       background-size: 13px 13px;
+       display: inline-block;
+       height: 13px;
+       width: 13px;
+       margin-left: 4px;
+}
+
+.mw-icon-question:lang(ar),
+.mw-icon-question:lang(fa),
+.mw-icon-question:lang(ur) {
+       -webkit-transform: scaleX(-1);
+       -ms-transform: scaleX(-1);
+       transform: scaleX(-1);
+}
+
 td.mw-submit {
        white-space: nowrap;
 }