Generates tooltips on the columns labels of HTMLCheckMatrix.
Bug: 47094
Change-Id: I9670ecdc2cb553df07ee06e3b83b003382471d27
* 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 {
}
$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";
} );
}
+ $( document ).ready( function() {
+ var $matrixTooltips = $( '.mw-htmlform-matrix .mw-htmlform-tooltip' );
+ if ( $matrixTooltips.length ) {
+ mw.loader.using( 'jquery.tipsy', function () {
+ $matrixTooltips.tipsy();
+ } );
+ }
+ } );
}( mediaWiki, jQuery ) );
--- /dev/null
+<?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
.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;
}