@@ -378,7 +378,7 @@ function loadCss(cssUrl) {
378
378
}
379
379
ev . preventDefault ( ) ;
380
380
searchState . defocus ( ) ;
381
- window . hideAllModals ( true ) ; // true = reset focus for notable traits
381
+ window . hideAllModals ( true ) ; // true = reset focus for tooltips
382
382
}
383
383
384
384
function handleShortcut ( ev ) {
@@ -784,17 +784,17 @@ function loadCss(cssUrl) {
784
784
// we need to switch away from mobile mode and make the main content area scrollable.
785
785
hideSidebar ( ) ;
786
786
}
787
- if ( window . CURRENT_NOTABLE_ELEMENT ) {
788
- // As a workaround to the behavior of `contains: layout` used in doc togglers, the
789
- // notable traits popup is positioned using javascript.
787
+ if ( window . CURRENT_TOOLTIP_ELEMENT ) {
788
+ // As a workaround to the behavior of `contains: layout` used in doc togglers,
789
+ // tooltip popovers are positioned using javascript.
790
790
//
791
791
// This means when the window is resized, we need to redo the layout.
792
- const base = window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE ;
793
- const force_visible = base . NOTABLE_FORCE_VISIBLE ;
794
- hideNotable ( false ) ;
792
+ const base = window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE ;
793
+ const force_visible = base . TOOLTIP_FORCE_VISIBLE ;
794
+ hideTooltip ( false ) ;
795
795
if ( force_visible ) {
796
- showNotable ( base ) ;
797
- base . NOTABLE_FORCE_VISIBLE = true ;
796
+ showTooltip ( base ) ;
797
+ base . TOOLTIP_FORCE_VISIBLE = true ;
798
798
}
799
799
}
800
800
} ) ;
@@ -822,27 +822,35 @@ function loadCss(cssUrl) {
822
822
} ) ;
823
823
} ) ;
824
824
825
- function showNotable ( e ) {
826
- if ( ! window . NOTABLE_TRAITS ) {
825
+ function showTooltip ( e ) {
826
+ const notable_ty = e . getAttribute ( "data-notable-ty" ) ;
827
+ if ( ! window . NOTABLE_TRAITS && notable_ty ) {
827
828
const data = document . getElementById ( "notable-traits-data" ) ;
828
829
if ( data ) {
829
830
window . NOTABLE_TRAITS = JSON . parse ( data . innerText ) ;
830
831
} else {
831
- throw new Error ( "showNotable () called on page without any notable traits!" ) ;
832
+ throw new Error ( "showTooltip () called with notable without any notable traits!" ) ;
832
833
}
833
834
}
834
- if ( window . CURRENT_NOTABLE_ELEMENT && window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE === e ) {
835
+ if ( window . CURRENT_TOOLTIP_ELEMENT && window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE === e ) {
835
836
// Make this function idempotent.
836
837
return ;
837
838
}
838
839
window . hideAllModals ( false ) ;
839
- const ty = e . getAttribute ( "data-ty" ) ;
840
840
const wrapper = document . createElement ( "div" ) ;
841
- wrapper . innerHTML = "<div class=\"content\">" + window . NOTABLE_TRAITS [ ty ] + "</div>" ;
842
- wrapper . className = "notable popover" ;
841
+ if ( notable_ty ) {
842
+ wrapper . innerHTML = "<div class=\"content\">" +
843
+ window . NOTABLE_TRAITS [ notable_ty ] + "</div>" ;
844
+ } else if ( e . getAttribute ( "title" ) !== undefined ) {
845
+ const titleContent = document . createElement ( "div" ) ;
846
+ titleContent . className = "content" ;
847
+ titleContent . appendChild ( document . createTextNode ( e . getAttribute ( "title" ) ) ) ;
848
+ wrapper . appendChild ( titleContent ) ;
849
+ }
850
+ wrapper . className = "tooltip popover" ;
843
851
const focusCatcher = document . createElement ( "div" ) ;
844
852
focusCatcher . setAttribute ( "tabindex" , "0" ) ;
845
- focusCatcher . onfocus = hideNotable ;
853
+ focusCatcher . onfocus = hideTooltip ;
846
854
wrapper . appendChild ( focusCatcher ) ;
847
855
const pos = e . getBoundingClientRect ( ) ;
848
856
// 5px overlap so that the mouse can easily travel from place to place
@@ -864,62 +872,62 @@ function loadCss(cssUrl) {
864
872
) ;
865
873
}
866
874
wrapper . style . visibility = "" ;
867
- window . CURRENT_NOTABLE_ELEMENT = wrapper ;
868
- window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE = e ;
875
+ window . CURRENT_TOOLTIP_ELEMENT = wrapper ;
876
+ window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE = e ;
869
877
wrapper . onpointerleave = function ( ev ) {
870
878
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
871
879
if ( ev . pointerType !== "mouse" ) {
872
880
return ;
873
881
}
874
- if ( ! e . NOTABLE_FORCE_VISIBLE && ! elemIsInParent ( event . relatedTarget , e ) ) {
875
- hideNotable ( true ) ;
882
+ if ( ! e . TOOLTIP_FORCE_VISIBLE && ! elemIsInParent ( event . relatedTarget , e ) ) {
883
+ hideTooltip ( true ) ;
876
884
}
877
885
} ;
878
886
}
879
887
880
- function notableBlurHandler ( event ) {
881
- if ( window . CURRENT_NOTABLE_ELEMENT &&
882
- ! elemIsInParent ( document . activeElement , window . CURRENT_NOTABLE_ELEMENT ) &&
883
- ! elemIsInParent ( event . relatedTarget , window . CURRENT_NOTABLE_ELEMENT ) &&
884
- ! elemIsInParent ( document . activeElement , window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE ) &&
885
- ! elemIsInParent ( event . relatedTarget , window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE )
888
+ function tooltipBlurHandler ( event ) {
889
+ if ( window . CURRENT_TOOLTIP_ELEMENT &&
890
+ ! elemIsInParent ( document . activeElement , window . CURRENT_TOOLTIP_ELEMENT ) &&
891
+ ! elemIsInParent ( event . relatedTarget , window . CURRENT_TOOLTIP_ELEMENT ) &&
892
+ ! elemIsInParent ( document . activeElement , window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE ) &&
893
+ ! elemIsInParent ( event . relatedTarget , window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE )
886
894
) {
887
895
// Work around a difference in the focus behaviour between Firefox, Chrome, and Safari.
888
- // When I click the button on an already-opened notable trait popover, Safari
896
+ // When I click the button on an already-opened tooltip popover, Safari
889
897
// hides the popover and then immediately shows it again, while everyone else hides it
890
898
// and it stays hidden.
891
899
//
892
900
// To work around this, make sure the click finishes being dispatched before
893
- // hiding the popover. Since `hideNotable ()` is idempotent, this makes Safari behave
901
+ // hiding the popover. Since `hideTooltip ()` is idempotent, this makes Safari behave
894
902
// consistently with the other two.
895
- setTimeout ( ( ) => hideNotable ( false ) , 0 ) ;
903
+ setTimeout ( ( ) => hideTooltip ( false ) , 0 ) ;
896
904
}
897
905
}
898
906
899
- function hideNotable ( focus ) {
900
- if ( window . CURRENT_NOTABLE_ELEMENT ) {
901
- if ( window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE . NOTABLE_FORCE_VISIBLE ) {
907
+ function hideTooltip ( focus ) {
908
+ if ( window . CURRENT_TOOLTIP_ELEMENT ) {
909
+ if ( window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE . TOOLTIP_FORCE_VISIBLE ) {
902
910
if ( focus ) {
903
- window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE . focus ( ) ;
911
+ window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE . focus ( ) ;
904
912
}
905
- window . CURRENT_NOTABLE_ELEMENT . NOTABLE_BASE . NOTABLE_FORCE_VISIBLE = false ;
913
+ window . CURRENT_TOOLTIP_ELEMENT . TOOLTIP_BASE . TOOLTIP_FORCE_VISIBLE = false ;
906
914
}
907
915
const body = document . getElementsByTagName ( "body" ) [ 0 ] ;
908
- body . removeChild ( window . CURRENT_NOTABLE_ELEMENT ) ;
909
- window . CURRENT_NOTABLE_ELEMENT = null ;
916
+ body . removeChild ( window . CURRENT_TOOLTIP_ELEMENT ) ;
917
+ window . CURRENT_TOOLTIP_ELEMENT = null ;
910
918
}
911
919
}
912
920
913
- onEachLazy ( document . getElementsByClassName ( "notable-traits " ) , e => {
921
+ onEachLazy ( document . getElementsByClassName ( "tooltip " ) , e => {
914
922
e . onclick = function ( ) {
915
- this . NOTABLE_FORCE_VISIBLE = this . NOTABLE_FORCE_VISIBLE ? false : true ;
916
- if ( window . CURRENT_NOTABLE_ELEMENT && ! this . NOTABLE_FORCE_VISIBLE ) {
917
- hideNotable ( true ) ;
923
+ this . TOOLTIP_FORCE_VISIBLE = this . TOOLTIP_FORCE_VISIBLE ? false : true ;
924
+ if ( window . CURRENT_TOOLTIP_ELEMENT && ! this . TOOLTIP_FORCE_VISIBLE ) {
925
+ hideTooltip ( true ) ;
918
926
} else {
919
- showNotable ( this ) ;
920
- window . CURRENT_NOTABLE_ELEMENT . setAttribute ( "tabindex" , "0" ) ;
921
- window . CURRENT_NOTABLE_ELEMENT . focus ( ) ;
922
- window . CURRENT_NOTABLE_ELEMENT . onblur = notableBlurHandler ;
927
+ showTooltip ( this ) ;
928
+ window . CURRENT_TOOLTIP_ELEMENT . setAttribute ( "tabindex" , "0" ) ;
929
+ window . CURRENT_TOOLTIP_ELEMENT . focus ( ) ;
930
+ window . CURRENT_TOOLTIP_ELEMENT . onblur = tooltipBlurHandler ;
923
931
}
924
932
return false ;
925
933
} ;
@@ -928,16 +936,16 @@ function loadCss(cssUrl) {
928
936
if ( ev . pointerType !== "mouse" ) {
929
937
return ;
930
938
}
931
- showNotable ( this ) ;
939
+ showTooltip ( this ) ;
932
940
} ;
933
941
e . onpointerleave = function ( ev ) {
934
942
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
935
943
if ( ev . pointerType !== "mouse" ) {
936
944
return ;
937
945
}
938
- if ( ! this . NOTABLE_FORCE_VISIBLE &&
939
- ! elemIsInParent ( ev . relatedTarget , window . CURRENT_NOTABLE_ELEMENT ) ) {
940
- hideNotable ( true ) ;
946
+ if ( ! this . TOOLTIP_FORCE_VISIBLE &&
947
+ ! elemIsInParent ( ev . relatedTarget , window . CURRENT_TOOLTIP_ELEMENT ) ) {
948
+ hideTooltip ( true ) ;
941
949
}
942
950
} ;
943
951
} ) ;
@@ -1039,14 +1047,14 @@ function loadCss(cssUrl) {
1039
1047
}
1040
1048
1041
1049
/**
1042
- * Hide popover menus, notable trait tooltips, and the sidebar (if applicable).
1050
+ * Hide popover menus, clickable tooltips, and the sidebar (if applicable).
1043
1051
*
1044
- * Pass "true" to reset focus for notable traits .
1052
+ * Pass "true" to reset focus for tooltip popovers .
1045
1053
*/
1046
1054
window . hideAllModals = function ( switchFocus ) {
1047
1055
hideSidebar ( ) ;
1048
1056
window . hidePopoverMenus ( ) ;
1049
- hideNotable ( switchFocus ) ;
1057
+ hideTooltip ( switchFocus ) ;
1050
1058
} ;
1051
1059
1052
1060
/**
0 commit comments