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 :

  1. Modifier le script js vu à la page "ajouter un script".

  2. Modifier le fichier libraries.yml du thème

  3. Ajouter des styles au fichier de style du thème

Billet créé le :
21 nov 2020

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
Cliquez sur le bouton pour copier le code 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 cœur de Drupal depuis la version 8, 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