Aide:Reference Tooltips
Que fait-il ?
[modifier | modifier le code]![](http://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Reference_Tooltips_exemple.png/293px-Reference_Tooltips_exemple.png)
Ce gadget va tout simplement afficher pour vous le contenu de la note ou la référence qui vous intéresse, pour l'afficher immédiatement sans déplacement dans la page. S'il y a un renvoi vers une entrée bibliographique, il vous permet également de la consulter sans plus de détours. Cette fonctionnalité incite les lecteurs à lire les sources, souvent peu consultées.
C'est une version améliorée de TooltipRef, un gadget similaire mais avec une apparence un peu plus vieille.
Activation
[modifier | modifier le code]Initialement, il devait être activé chez tous le monde suite à cette consultation sur le bistro, mais un outil similaire devrait voir le jour prochainement sur tous les wiki. Pour activer Reference Tooltips, ajoutez à votre common.css :
/* Voir [[Aide:Reference Tooltips]] */ .rt-tooltip { position: absolute; z-index: 100; max-width: 350px; background: #fff; color: #222; font-size: 13px; line-height: 1.5em; border: 1px solid #c8ccd1; border-radius: 3px; -webkit-box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3); box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.3); overflow-wrap: break-word; } .rt-tooltip.rt-tooltip-insideWindow { z-index: 110; } .rt-tooltipContent { padding: 8px 11px; } .rt-tooltip-above .rt-tooltipContent { margin-bottom: -8px; padding-bottom: 16px; } .rt-tooltip-below .rt-tooltipContent { margin-top: -10px; padding-top: 18px; } .rt-tooltipTail, .rt-tooltipTail:after { position: absolute; width: 12px; height: 12px; } .rt-tooltipTail { background: #c8ccd1; background: -webkit-linear-gradient(bottom left, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%); background: linear-gradient(to top right, #c8ccd1 50%, rgba(0, 0, 0, 0) 50%); } .rt-tooltipTail:after { content: ""; background: #fff; bottom: 1px; left: 1px; } .rt-tooltip-above .rt-tooltipTail { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; bottom: 0; left: 15px; } .rt-tooltip-below .rt-tooltipTail { -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; top: 0; left: 27px; } .rt-settingsLink { background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0D%0A%20%20%20%20%3Cpath%20fill%3D%22%23555%22%20d%3D%22M20%2014.5v-2.9l-1.8-.3c-.1-.4-.3-.8-.6-1.4l1.1-1.5-2.1-2.1-1.5%201.1c-.5-.3-1-.5-1.4-.6L13.5%205h-2.9l-.3%201.8c-.5.1-.9.3-1.4.6L7.4%206.3%205.3%208.4l1%201.5c-.3.5-.4.9-.6%201.4l-1.7.2v2.9l1.8.3c.1.5.3.9.6%201.4l-1%201.5%202.1%202.1%201.5-1c.4.2.9.4%201.4.6l.3%201.8h3l.3-1.8c.5-.1.9-.3%201.4-.6l1.5%201.1%202.1-2.1-1.1-1.5c.3-.5.5-1%20.6-1.4l1.5-.3zM12%2016c-1.7%200-3-1.3-3-3s1.3-3%203-3%203%201.3%203%203-1.3%203-3%203z%22%2F%3E%0D%0A%3C%2Fsvg%3E); float: right; cursor: pointer; margin: -4px -4px 0 8px; height: 24px; width: 24px; border-radius: 2px; background-position: center center; background-repeat: no-repeat; background-size: 24px 24px; } .rt-settingsLink:hover { background-color: #eee; } .rt-target { background-color: #def; } .rt-enableSelect { font-weight: bold; } .rt-settingsFormSeparator { margin: 0.85714286em 0; } .rt-numberInput.rt-numberInput { width: 150px; } .rt-tooltipsForCommentsField.rt-tooltipsForCommentsField.rt-tooltipsForCommentsField { margin-top: 1.64285714em; } .rt-disabledHelp { border-collapse: collapse; } .rt-disabledHelp td { padding: 0; } .rt-disabledNote.rt-disabledNote { vertical-align: bottom; padding-left: 0.36em; font-weight: bold; } @-webkit-keyframes rt-fade-in-up { 0% { opacity: 0; -webkit-transform: translate(0, 20px); -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } } @-moz-keyframes rt-fade-in-up { 0% { opacity: 0; -webkit-transform: translate(0, 20px); -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } } @keyframes rt-fade-in-up { 0% { opacity: 0; -webkit-transform: translate(0, 20px); -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } } @-webkit-keyframes rt-fade-in-down { 0% { opacity: 0; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } } @-moz-keyframes rt-fade-in-down { 0% { opacity: 0; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } } @keyframes rt-fade-in-down { 0% { opacity: 0; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px) } 100% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } } @-webkit-keyframes rt-fade-out-down { 0% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } 100% { opacity: 0; -webkit-transform: translate(0, 20px); -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px) } } @-moz-keyframes rt-fade-out-down { 0% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } 100% { opacity: 0; -webkit-transform: translate(0, 20px); -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px) } } @keyframes rt-fade-out-down { 0% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } 100% { opacity: 0; -webkit-transform: translate(0, 20px); -moz-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px) } } @-webkit-keyframes rt-fade-out-up { 0% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } 100% { opacity: 0; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px) } } @-moz-keyframes rt-fade-out-up { 0% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } 100% { opacity: 0; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px) } } @keyframes rt-fade-out-up { 0% { opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } 100% { opacity: 0; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); transform: translate(0, -20px) } } .rt-fade-in-up { -webkit-animation: rt-fade-in-up 0.2s ease forwards; -moz-animation: rt-fade-in-up 0.2s ease forwards; animation: rt-fade-in-up 0.2s ease forwards } .rt-fade-in-down { -webkit-animation: rt-fade-in-down 0.2s ease forwards; -moz-animation: rt-fade-in-down 0.2s ease forwards; animation: rt-fade-in-down 0.2s ease forwards } .rt-fade-out-down { -webkit-animation: rt-fade-out-down 0.2s ease forwards; -moz-animation: rt-fade-out-down 0.2s ease forwards; animation: rt-fade-out-down 0.2s ease forwards } .rt-fade-out-up { -webkit-animation: rt-fade-out-up 0.2s ease forwards; -moz-animation: rt-fade-out-up 0.2s ease forwards; animation: rt-fade-out-up 0.2s ease forwards }
Et à votre common.js :
importScript('MediaWiki:Gadget-ReferenceTooltips.js')
Configuration et options disponibles
[modifier | modifier le code]![](http://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Reference_Tooltips_reworked_-_menu.png/220px-Reference_Tooltips_reworked_-_menu.png)
Ce gadget dispose d'un menu de configuration qui lui est propre. Ce menu est accessible en cliquant sur le bouton de réglage en haut à droite d'une infobulle et permet de configurer le gadget. Les choix sont sauvegardés avec un cookie.
Désactivation et réactivation
[modifier | modifier le code]Le gadget peut être désactivé depuis le menu intégré. Pour réactiver le gadget, il suffit de descendre tout en bas d'une page Wikipédia et de cliquer sur le lien « Activer Référence Tooltips » comme indiqué lors de la désactivation.
Au clic ou au survol
[modifier | modifier le code]Le menu permet également de choisir la façon dont doit apparaît l'infobulle : soit au survol (par défaut), soit en cliquant sur une référence (cela ne vous redirigera donc plus vers la section qui contient les références).
Délai avant apparition
[modifier | modifier le code]Le menu permet aussi de régler le délai d'apparition de l'infobulle, en millisecondes, pour éviter l'apparition intempestive et non voulue d'une infobulle. Le délai peut être paramétré entre 0 et 5 000 millisecondes.
Désactivation totale et réactivation pour les utilisateurs enregistrés
[modifier | modifier le code]Pour les utilisateurs enregistrés, le gadget peut également être désactivé dans la section « Gadgets » de vos préférences. Il ne sera alors plus chargé. C'est une option utile pour les utilisateurs qui tiennent à limiter la quantité de JavaScript chargé et exécuté.
Le gadget peut être réactivé de la même manière. Cependant, si vous aviez désactivé le gadget depuis le menu intégré et que vous réactivez le gadget moins de 90 jours[1] après depuis vos préférences, il faudra réactiver le gadget en allant tout en bas d'une page Wikipédia et de cliquer sur le lien « Activer Référence Tooltips ».
Le gadget ne fonctionne pas ou ne réagit pas comme prévu
[modifier | modifier le code]Vous trouverez de l'aide en écrivant un message sur Wikipédia:Questions techniques. Vous pouvez également rapporter un bug sur le projet JavaScript.
Note
[modifier | modifier le code]- Le cookie qui permet de sauvegarder les choix de l'utilisateur expire au bout de 90 jours.