[EDGE] Installer le plugin tooltip et bordures adaptées au thème

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello les ami(e)s,

Ange Tuteur nous propose un petit plugin :

http://fmdesign.forumotion.com/t402-change-the-style-of-tooltips-with-tooltipster#3238

L'aperçu imagé:



Ce plugin permet de mettre en cache le contenu des balises title et donner une infobulle vraiment très chouettes comme sur ce forum.

Je vais vous donner l'astuce pour que les bordures soient de la même couleur que le thème choisi super .


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettez un titre explicite.
Cochez sur toutes les pages.

Déposez ceci:
Code:

$(function(){
          // general options for editing the tooltip
          // see more : http://iamceege.github.io/tooltipster/#options
          var options = {
            animation : 'fade',
            arrow : true,
            speed : 300,
            delay : 300,
            onlyOne : true,
            theme : 'tooltipster-default'
          },
        
          // delay execution by placing the function into another queue
          // helps with applying to other JS created elements such as the editor
          queue = true,
          titles,
        
          parse = function() {
            titles = $('[title]');
            titles.tooltipster && titles.not('[title=""], .mentiontag, .tooltipstered').tooltipster(options);
          };
        
          queue ? $(parse) : parse();
        });



Pensez a cliquer sur le bouton Valider


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

En bas de page déposez ceci:
Code:
.tooltipster-base{border:3px solid #69c;}


Pensez à valider les modifications en cliquant sur le bouton Valider


Éditez le script :
Code:
[FA EDGE] ALL.JS

Recherchez ceci:
Code:
{ border-color:' + palette[0] + '!important; }

ATTENTION A NE PAS OUBLIER LA VIRGULE

Juste avant déposez ceci:
Code:
,.tooltipster-base

Vous aurez alors cette ligne une fois effectué:
Code:

'form.search-form input.search-keywords, input.search-button,.tooltipster-base { border-color:' + palette[0] + '!important; }'+


Pensez a cliquer sur le bouton Valider



Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide clin oeil
https://www.milouze14.com/f108-entraide-tous-supports



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





clost
avatar
Membre

Messageclost

  • 16px
  • 24px
  • Zoom
Bonsoir, merci Philippe, mes encadrés sont de couleur du thème, parfait super
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello et merci Chris pour la remontée



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum