🌋 Sous le cratère du volcan


#21

Salut Éric,

J’ai testé sous Chrome en windows et linux, puis à l’instant sous linux en Firefox sans reproduire ce défaut. Est-ce que tu es dans un de ces cas ?

CheckBox est le tiddler “macro” utilisable dans d’autres tiddlers.


#22

Jean-Bernard,

Je suis sous firefox en windows

Mais le pb ne viens pas de là car sur TON wiki en local, tout fonctionne bien. Le Pb vient de chez moi mais je ne trouve pas d’où


#23

Je mets en ligne ma dernière version. Laisse moi 5 minutes.

Bon, je n’arrive pas à télécharger (ça arrive parfois).

Ne passe pas de temps là dessus je vais revérifier sur un nouveau wiki.


Bon et bien je confirme : I have a bug somewhere!

J’ai remonté les tiddlers concernant Ariane depuis mon site de prod sur mon wiki “Frame” et ça marche tip-top.

Donc le problème ne viens pas de ton code (magique le code…) ni des adaptations de-ci de-là que j’ai pu faire, mais bien d’autre chose dans mon wiki “Apprendre”

Il me reste à trouver quoi. Ça m’apprendra !! :disappointed_relieved:


#24

J’ai la solution (en un peu plus d’une heure quand même)

J’indique ce que j’ai trouvé juste pour l’histoire et peut être aussi pour d’autres “aficionados” de TiddlyWiki, et parce-que cela s’est produit sur “Apprendre” qui est un wiki tout de même abondamment regardé.

Au juger, je me suis dit que ceci devait vraisemblablement provenir d’un CSS actif (ily en a beaucoup)

1- J’ai désactivé pratiquement tous les plugins installés, ce qui supprime déjà pas mal de CSS
2- Rien de ce côté là, donc j’ai ensuite désactivé les CSS restant (ceux qui ne sont donc pas issus de plugins) en regardant les plus suspects en premier.
3- Bingo avec le CSS $:/cssCouleurs
4- Et précisément sur la ligne .black {background: black;color: white;} que j’ai donc désactivée (/* ... */).

Ceci dit, je ne comprend pas exactement pourquoi il y a interférence avec Ariane. En tout cas le problème est maintenant résolu.


#25

L’interférence vient du fait que le bouton bascule se nomme “flat”/“black”
dans l’appel de :
\define CheckBox2(On:"OUI", Off:"NON", Con:"#034B78", Coff:"#3c3c3c", Data:"style")
si par exemple Off vaut “black”, styler alors
.black {background: black;color: white;}
et
.$Off$ {background: black;color: white;}
revient au même…


#26

C.Q.F.D Jean-Bernard !

J’ai bien dit qu’il faudra s’accrocher en 2019 ! :smiley::sweat_smile:


#27

Jean-Bernard

Pendant que nous sommes sur ce sujet, et sans vouloir abuser de ton temps, je passe le bouton de choix de couleurs (black/Flat) dans la barre des contrôles de page (SideBar).

Y a-t-il un moyen de prodiguer un “hint” sur les boutons de sorte qu’au passage de la souris soit indiqué leur objet ?


#28

Un “hint” c’est un popup du genre ?

<$reveal type="popup" state="$:/state/$hint$">

#29

Oui, comme le bouton est sans texte, en passant la souris dessus apparaît un message sous la souris indiquant par exemple “Changer la couleur du fil d’Ariane, black ou flat”.

Le terme adhéquat est plutôt “Tooltip”


#30

Ok, c’est une “tooltip”…
Je vais voir du côté de :
https://www.w3schools.com/css/css_tooltip.asp


#31

Je viens de tester…
En 3 minutes chrono, ça le fait…
Tu veux le faire par toi-même et je te guide ?

  1. Rendez-vous dans https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom
  2. Puis ouvrir le tiddler Checkbox…
  3. Recopier tous les style .tooltips
  4. Englober le checkboxex ainsi :
<div class="tooltip">
<$checkboxex class="$On$-$Off$checkbox" tiddler="$:/Tiddler Breadcrumbs Flat" index=$Data$ checked="$On$" unchecked="$Off$"> </$checkboxex>
  <span class="tooltiptext">Tooltip text</span>
</div>

  1. Tester et remplacer “Tooltip text” par un "$tooltip$ à mettre en paramètre de la fonction CheckBox2

Si t’arrives pas je t’aiderai :wink:


#32

Je n’accède pas au site W3schools.
Donc je ne peux pas recopier tous les styles.

Si ce n’est pas trop gros, tu peux les imprimer ici ?

Après j’essaie de me débrouiller tout seul, promis…


#33

Dans le style :

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

#34

J’ai fait une mise-à-jour https://oxydum.github.io/ariane/


#35

Jean-Bernard,

OK, c’est fait, ça marche. Tu est vraiment un super Prof!! MERCI :smiley:


#36

Je l’avais fait suivant tes instructions:

\define CheckBox2(On:"OUI", Off:"NON", Con:"#034B78", Coff:"#3c3c3c", Data:"style", tooltip:"$tooltip$")

Puis:

<style>
...
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
...
</style>

Et :

<div class="tooltip">
<$checkboxex class="$On$-$Off$checkbox" tiddler="$:/Tiddler Breadcrumbs Flat" index=$Data$ checked="$On$" unchecked="$Off$"> </$checkboxex>
<span class="tooltiptext">Modifier la couleur du Fil d'Ariane</span>
</div>

Mais ce que tu as mis en ligne est encore plus clair. J’ai bien compris.


#37

Super ! La version en ligne est suffisamment générique pour collecter tout type de données binaires et les infobulles (tooltips) sont en couleurs. Je n’aurai pas réussi à faire un aussi joli résultat sans toi :blush:

Je n’ai pas réussi à changer la couleur de l’infobulle en fonction de l’état du bouton. Il faudrait que j’y consacre un peu de temps d’affinage !