diff --git a/modules/ext.RevisionSlider.RevisionListView.js b/modules/ext.RevisionSlider.RevisionListView.js index 2461427a..6cd6a7e8 100644 --- a/modules/ext.RevisionSlider.RevisionListView.js +++ b/modules/ext.RevisionSlider.RevisionListView.js @@ -289,7 +289,14 @@ $.extend( RevisionListView.prototype, { // eslint-disable-next-line mediawiki/class-doc tooltip.$element.addClass( 'mw-revslider-revision-tooltip-' + pos ); - $( document.body ).append( tooltip.$element ); + const $focusedRevisionPointer = $( '.mw-revslider-pointer[data-pos="' + pos + '"]' ); + if ( $focusedRevisionPointer.length ) { + // Make sure tooltips are added next to the pointer so they can be reached when tabbing + $focusedRevisionPointer.parent().append( tooltip.$element ); + } else { + $( document.body ).append( tooltip.$element ); + } + tooltip.toggle( true ); // TODO this line should move somewhere else $revisionWrapper.addClass( 'mw-revslider-revision-wrapper-hovered' ); diff --git a/modules/ext.RevisionSlider.less b/modules/ext.RevisionSlider.less index 2518ebfe..a16de043 100644 --- a/modules/ext.RevisionSlider.less +++ b/modules/ext.RevisionSlider.less @@ -125,7 +125,7 @@ } .mw-revslider-tooltip { - font-size: 0.8em; + font-size: 13px; } .mw-revslider-revision-tooltip { @@ -429,8 +429,6 @@ of the frameless one (to fit the size of the toggle button */ .mw-revslider-highlightable-row { border: 1px solid transparent; border-radius: 5em; - margin-left: -8px; - padding-left: 7px; &.mw-revslider-highlight { border-color: #e0e0e0;