Tooltip
Pour comprendre ce qui suit, une (re)lecture des pages du chapitre DevWeb_jQuery du site peut être souhaitable :
Pour ajouter les bulles d'info qui figurent dans certaines page du site, j'ai suivi les étapes suivantes :
- Modifier le script js vu à la page "ajouter un script".
- Modifier le fichier libraries.yml du thème
- Ajouter des styles au fichier de style du thème
1. Modifier le script
Comme j'utilise la bibliothèque jquery Tooltip, j'ai ajouté les lignes de code suivantes :
$(".book-pager__item").tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
La fonction tooltip() de la bibliothèque est donc appliquée aux éléments du DOM dont la classe est book-pager__item (les liens du menu de navigation du livre)
3. Compléter le fichier de style
En fin du fichier de style de votre site, coller les lignes présentées ci-dessous.
- CSS
dans le presse papier
.ui-tooltip, .arrow:after { background: #f0f0f0; border: 2px solid ; } .ui-tooltip { padding: 10px 20px; color: #0026FF; border-radius: 5px; font: bold 14px "Helvetica Neue", Sans-Serif; /*text-transform: uppercase;*/ box-shadow: 0 0 7px black; } .arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; } .arrow.top { top: -16px; bottom: auto; } .arrow.left { left: 20%; } .arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 6px 5px 9px -9px black; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .arrow.top:after { bottom: -20px; top: auto; }
2. Modifier la librairie
Dans le fichier xxx.lbrairies.yml (xxx représente le nom de votre thème), ajouter la ligne suivante dans la sous-section dependencies de la section js.
- jquery_ui_tooltip/tooltip
Dans monthème, cette section est reprise ci-dessous
js:
js/monScript.js: {}
dependencies:
- jquery_ui/core
- jquery_ui_tooltip/tooltip
- jquery_ui_tabs/tabs
- jquery_ui_accordion/accordion
NB : si vous utilisez les bibliothèques jQuery intégrées au coeur de D8, cette section devrait être la suivante :
js:
js/dhv3.js: {}
dependencies:
- core/jquery
- core/jquery.ui.tooltip
- core/jquery.ui.tabs
- core/jquery.ui.accordion
