diff --git a/src/css/common.css b/src/css/common.css index fec2c9bc5..a926aaf2f 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -1,16 +1,16 @@ @font-face { font-family: 'FontAwesome'; - src: url('fonts/fontawesome-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; + src: url('fonts/fontawesome-webfont.ttf') format('truetype'); } .fa { + display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; vertical-align: baseline; - display: inline-block; } /* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */ @@ -23,27 +23,29 @@ body:not(.advancedUser) [data-tip]:after { border: 1px solid gray; border-radius: 3px; box-shadow: 1px 1px 3px gray; + box-sizing: border-box; color: black; content: attr(data-tip); - display: none; font: 12px sans-serif; - left: 0; + left: 0.5em; line-height: 130%; - min-width: 55%; + opacity: 0; padding: 4px 6px; - position: absolute; + pointer-events: none; + position: fixed; + right: 0.5em; text-align: left; top: 110%; + visibility: hidden; white-space: pre-line; z-index: 20; - pointer-events: none; - opacity: 0; } body [data-tip]:hover:after { - display: initial; - opacity: 1 !important; - -webkit-transition: opacity 0.2s 0.4s; - transition: opacity 0.2s 0.4s; + opacity: 1; + position: absolute; + transition: visibility 0s 0.6s, opacity 0.2s 0.7s; + -webkit-transition: visibility 0s 0.6s, opacity 0.2s 0.7s; + visibility: visible; } body[dir=rtl] [data-tip]:hover:after { text-align: right; @@ -51,22 +53,23 @@ body[dir=rtl] [data-tip]:hover:after { body [data-tip][data-tip-anchor="top"]:hover:after { bottom: 140%; + left: initial; top: auto; + width: 8.5em; } body[dir=ltr] [data-tip][data-tip-anchor="top"]:hover:after { - left: -500%; right: 0; } body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after { left: 0; - right: -500%; } body [data-tip][data-tip-anchor="topcenter"]:hover:after { bottom: 140%; left: -225%; - right: -225%; + right: initial; top: auto; + width: 8.5em; } .hiddenFileInput { diff --git a/src/js/i18n.js b/src/js/i18n.js index 36a356e9d..3622e9665 100644 --- a/src/js/i18n.js +++ b/src/js/i18n.js @@ -52,7 +52,7 @@ uDom('[placeholder]').forEach(function(elem) { uDom('[data-i18n-tip]').forEach(function(elem) { elem.attr( 'data-tip', - vAPI.i18n(elem.attr('data-i18n-tip')).replace(/
/g, '') + vAPI.i18n(elem.attr('data-i18n-tip')).replace(/
/g, '\n').replace(/\n{3,}/g, '\n\n') ); });