vendredi, 16 mars 2012 14:05

Tooltips en CSS3

Sous Joomla 1.5, les tooltips de AllEvents s'affichaient grâce à un code javascript Mootools 1.1.   Dès Joomla 1.6, cela ne fonctionnait plus car la librairie Mootools a évolué et de la version 1.1 elle est passée à la version 1.4.  Désireux de pouvoir proposer AllEvents pour la majorité de version de Joomla, je me voyais mal développer un script pour Joomla 1.5 (Mootools 1.1/1.2), Joomla 1.6 (Mootools 1.2), J1.7 (M1.3) et J2.5 (M1.4).  

Je suis passionné mais pas fou quand même !

Surfant sur le net, j'ai trouvé le tutoriel "CSS3 animated tooltips" chez Script-Tutorials.  Le code proposé est d'une simplicité monstrueuse et ne dépend plus d'un code javascript.   Pourquoi est-ce un énorme avantage ?  Parce que l'affichage des tooltips ne sera plus dépendant de la qualité des scripts qui sont actifs sur votre page.  Que vous ayez un plantage dans le javascript de votre template, d'un module ou d'un obscur plug-in, pas de soucis dorénavant.

Veuillez juste noter que les tooltips sont maintenant en CSS3 et donc il faut un navigateur supportant cette norme.   C'est le cas de tous sauf les brotonsaures et les erreurs de l'informatique : si vous êtes toujours (???) utilisateurs le l'immonde IE6, passez votre chemin; les tooltips; c'est pas pour vous.

Publié dans Module site
vendredi, 21 octobre 2011 15:34

Tooltips sur les puces des différentes listes

Les différentes listes d'évènements ont été améliorées en ce sens que chaque puces réprésentant un agenda, une activité, une localisation, ... propose maintenant le titre de cet agenda, activité, ... sous la forme d'un tooltip.

AllEvents.  Tooltips sur les puces des différentes listes

Publié dans Listes d'évènements

Certains évènements n'ont pas de vignette dans les tooltipsDans le module Calendrier, lorsque certains évènements ont une vignette et d'autres pas, l'affichage des tooltips est inconsistant comme ci-à gauche illustré.

Ce n'est vraiment pas très joli.

Pour y remédier, trois solutions : vous optez pour un affichage tooltip qui ne reprend pas la vignette (voir paramètres "calendrier" du module), soit vous attribuez toujours une image aux évènements soit, probablement la meilleure méthode, vous attribuez une vignette par défaut au type d'agenda.

Dans ce dernier cas, si une vignette est précisée au niveau de l'évènement, cette vignette sera utilisée.   S'il n'y a pas de vignette "événementielle", ce sera celle de l'agenda qui sera utilisé.

Publié dans Module site
mercredi, 11 mai 2011 21:59

Stylisation des tooltips

AllEvents. Stylisation des tooltips.Le module calendrier vous propose plusieurs styles différent pour l'affichage des tooltips (ci- contre le style Titre, puces et textes).

Le choix du style se fait dans les paramètres du module.

Chaque style est surchargeable et vous pouvez définir vos propres styles dès lors que vous avez un peu de connaissance PHP / HTML / CSS.






(cliquez pour agrandir)

Publié dans Module site

AllEvents.  Surchargez les tooltips de AllEvents
AllEvents vous propose différentes mises en page pour l'affichage des tooltips; ces petites bulles d'informations qui apparaissent au survol du titre d'un évènement ou, depuis le calendrier mensuel, sur le numéro du jour où il y a un ou plusieurs évènements.

Parmis les layouts proposés, il y a par exemple celui-ci à gauche : le titre de l'évènement mis en évidence puis les informations complémentaires (dates, agenda, activité, public cible, section, catégories et localisation).

Les layouts disponibles pour les tooltips sont présents dans le dossier AllEvents. Surchargez les tooltips de AllEvents/components/com_allevents/includes/tooltips de votre site.   A chaque layout proposé, vous allez trouver un dossier correspondant.   Ainsi, dans la version 1.1 Alpha 5e de AllEvents, les deux styles proposés sont "default" et "title_bullets_text".

La structure des dossiers est identique : un fichier nommé default.php, un fichier nommé tooltips.css et le traditionnel index.html de Joomla.

La surcharge est simple :

  1. Dans le dossier /components/com_allevents/override, créez un dossier qui porte le nom du layout que vous souhaitez modifier.   Par exemple, en supposant que vous souhaitez partir du layout title_bullets_text; vous devrez donc créer le dossier /components/com_allevents/override/tooltips/title_bullets_text.
  2. Copiez le fichier original /components/com_allevents/includes/tooltips/title_bullets_text dans le dossier que vous avez créé (càd dans le dossier //components/com_allevents/override/tooltips/title_bullets_text).
  3. Avec votre éditeur préféré, ouvrez le fichier nouvellement créé (càd dans le dossier //components/com_allevents/override/tooltips/title_bullets_text/default.php) et apportez-y toutes les modifications nécessaires pour que l'affichage respecte vos souhaits.

Remarque : si vous désirez également modifier la feuille de style; il faudra recopier le fichier tooltips.css du dossier original pour le placer dans le dossier /override afin de la surcharger.

Pour rappel : la surcharge telle que décrite ci-dessus vous permet de conserver vos modifications d'une version à une autre de AllEvents.   A l'instar de Joomla : si vous modifiez les fichiers source de Joomla, vous perdrez vos modifications dès lors que vous mettrez Joomla à jour.   En faisant de la surcharge, ce ne sera pas le cas.

Publié dans Plugin Override
lundi, 17 janvier 2011 23:09

Personnaliser l'apparence des tooltips

Les tooltips sont ces bulles qui apparaissent au survol de la souris sur une date pour laquelle il y a un évènement de prévu.   Le tooltip apparaît dans le module calendrier et dans la vue mensuelle dès lors que vous avez activé le paramètre "Afficher les tooltips".

Par défaut, la vignette de l'évènement ainsi que le titre, la date de début, de fin, le type d'agenda et le type d'activté est affiché.

Il vous est toutefois possible de paramétrer tout cela : le contenu (que faut-il afficher?) et la forme (comment l'afficher?)

Adapter le contenu : que faut-il afficher ?

  1. Dans le backend de votre site, veuillez activer le panneau de contrôle de AllEvents
  2. Cliquez sur le bouton Paramètres en haut à droite
  3. Affichez l'onglet "Tooltips"
  4. Activez / désactivez les champs que vous voulez afficher dans les tooltips
  5. Sauvez.

Adapter la forme : comment l'afficher ?

  1. Dans le backend de votre site, veuillez activez le panneau de contrôle de AllEvents
  2. Cliquez sur le bouton "Editer les feuilles de styles"
  3. Cliquez sur l'onglet "Module AllEvents - Calendrier"
  4. Cliquez sur le bouton "Vue mensuelle"
  5. Adaptez dans la feuille de style les données que vous voudriez modifier (couleur, marge, padding, position, ...).
  6. Sauvez.

Il sera peut-être nécessaire de vider le cache du site ainsi que le cache de votre navigateur.

Publié dans blog