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

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 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
  

Mots Clé Système