[SVG] Afficher une Tooltip

Invité · 13/04/2022, 10h34

Bonjour,

En suivant ce tutoriel :
https://www.petercollingridge.co.uk/...ctive/tooltip/

Je dois normalement utiliser ECMAScript.

Dans mon SVG :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <script type="text/ecmascript"> <![CDATA[
 
    function init(evt) {
        if ( window.svgDocument == null ) {
        // Define SGV
        svgDocument = evt.target.ownerDocument;
        }
        tooltip = svgDocument.getElementById('tooltip');
    }
 
    function ShowTooltip(evt) {
        // Put tooltip in the right position, change the text and make it visible
        tooltip.setAttributeNS(null,"x",evt.clientX+10);
        tooltip.setAttributeNS(null,"y",evt.clientY+30);
        tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext");
        tooltip.setAttributeNS(null,"visibility","visible");
    }
 
    function HideTooltip(evt) {
        tooltip.setAttributeNS(null,"visibility","hidden");
    }
    ]]></script>

Ajouter onload="init(evt)" dans l'élément SVG pour appeler la fonction init ().

Ensuite, à la fin du SVG, ajouter le texte de l'infobulle :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>

Enfin, à chacun des éléments auxquels je souhaite ajouter la fonction de survol de la souris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"
mouseovertext="Whatever text you want to show"

Je suppose que c'est dû au fait que je réutilise plusieurs fois mon image SVG, mais je ne comprends pas comment le mettre en place.

Pourriez-vous m'aider SVP ?

**NoSmoking** · 13/04/2022, 15h51

Bonjour,
peut-être devrais-tu regarder cette discussion : Infobulle SVG Path.

J'avais mis un exemple en ligne :

↪ Info-Bulle sur SVG

Invité · 13/04/2022, 16h25

Bonjour,

Merci pour cette exemple.

Dans mon cas, le premier (path id) serait égale à ($title) ou ($debut) et le second (path id) serait égale à ($fin), ou un (path id) à créer en référence à mes deux (SvgTxt) ?

J'avoue, ne pas bien saisir comment porter ce code en JavaScript à mon besoin !
J'aurais vraiment besoin d'aide ?

Bien cordialement

**NoSmoking** · 13/04/2022, 21h31

Visiblement tu mélanges un peu tout mais surtout si tu veux avoir accès à tes SVG via le JavaScript il te faut intégrer les images SVG en tant qu'élément SVG et non en tant qu'image <img>.

On devrait donc retrouver dans ton code des « vrais » élément <svg> du style

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<svg xmlns="http://www.w3.org/2000/svg"  width="220" height="40">
  <!-- les éléments enfants -->
</svg>

et non

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img class="classProg" src="images/image.php?width=220&amp;height=40&amp;prog=n,05:30,22:00&amp;title=Mar">

... donc il va ta falloir faire des include pour chacune de tes images.

Ensuite tu pourras simplement accéder à tes différents éléments et les manipuler comme tu le souhaites.

Remarque :
• <script type="text/ecmascript"> est obsolète et peux simplement être remplacé par <script> tout court.

• Dans ton fichier image.php il ne te faudra renvoyer que le code <svg> et supprimer tes entêtes comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

Invité · 13/04/2022, 23h51

Le novice que je suis, n'imaginais pas que cela était si complexe !

Les includes doivent bien porter sur les éléments de mon image ? soit (SvgTxt, SvgLine et SvgRect) ?

Je ne suis même pas sûr de la manière de faire ces includes !
<?php include("Mon élément"); ?>.

Auriez-vous le temps de me faire un exemple concret résument l'interaction (html + javascript + php) dans le contexte similaire au mien ?

Bien cordialement.

**NoSmoking** · 14/04/2022, 11h06

Si l'on part de ce que tu as réalisé, dans ton fichier image.php il te faudrait créer une fonction, par exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
function create_image($width, $height, $prog, $title) {
}

et c'est cette fonction qui sera appelée dans ta page vue.php.

Il te suffira de transformer tes paramètres $_GET en paramètre de fonction.

Dans ta page vue.php tu peux créer un array des données et boucler sur celui-ci pour au final avoir quelque chose de « simple » comme :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
include 'images/image.php';  // peut-être choisir un nom plus pertinent
$data = array(
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Lun.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Mar.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Mer.'),
  array( 'prog' => 'n,08:30,16:00', 'title' => 'Jeu.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Ven.'),
  array( 'prog' => 'n,00:00,24:00', 'title' => 'Sam.'),
  array( 'prog' => 'n,00:00,00:00', 'title' => 'Dim.'),
);
foreach( $data as $d){
  // signature fonction :
  // create_image($width, $height, $prog, $title)
  echo create_image( 220, 40, $d['prog'], $d['title']);
}
?>

pour le JavaScript, on verra après si tu le veux bien.

Invité · 20/04/2022, 23h58

Bonjour,

Je rencontre un problème.

J'ai dû modifier mon code de base pour être en adéquation avec la manière réel don sont récupérés les informations.
Voir PJ : prog_code_de_base.zip

J'ai mis en place la function create_image, mais ne sais pas comment intégrer dans mes "array" les informations de programmation 'prog' récupérer via java.
Les valeurs " var items" que j'ai mis en dure sont normalement récupérées sur ma chaudière.
Voir PJ : prog_code_avec_fonction.zip

Voyez-vous une possibilité ?

Bien cordialement

**NoSmoking** · 21/04/2022, 19h03

Tout d'abord une recommandation :
« dimensionne » ton SVG via la viewbox et ne donne pas de largeur et hauteur à celui-ci, par la suite il te sera plus aisé de manipuler le résultat.
Cela se traduit par la modification de ta fonction create_imageremplacer les lignes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
  // debut
  echo <<<HEREDOC
  <?xml version="1.0"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg xmlns="http://www.w3.org/2000/svg"  width="{$width}" height="{$height}" class="classProg" id="idHeaSch{$i}">
HEREDOC;

par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  // debut
  echo <<<HEREDOC
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0, 0, {$width}, {$height}">\n
HEREDOC;

c'est bien suffisant !

Maintenant le but serait d'avoir les données contenues dans les balises que tu souhaites ciblées, à savoir les <rect> comme par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<rect x="34" y="28" width="168" height="10" fill="#7cb6ec" stroke="none"  />
<rect x="72.5" y="28" width="115.5" height="10" fill="#f7a35c" stroke="none" data-prog ="n,05:30,22:00" />

ce sont les données data-prog que nous irons chercher avec le script.

Pour se faire il faut modifier ta fonction SvgRect :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function SvgRect($x1,$y1,$x2,$y2, $color, $data =''){
  $w=$x2-$x1;
  $h=$y2-$y1;
  $prog = !empty($data) ? ('data-prog ="'.$data.'"') : '';
  echo <<<HEREDOC
    <rect x="{$x1}" y="{$y1}" width="{$w}" height="{$h}" fill="{$color}" stroke="none" {$prog} />\n
HEREDOC;
}

on passe en paramètre les données que l'on veut afficher au survol.

Il convient maintenant de modifier la fonction appelante à savoir create_image pour ajouter le passage du paramètre.
Dans ta boucle if ($prog !== '') { il suffit de modifier les deux lignes d'appel de la fonction SvgRect comme suit :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if ($mode === 'n') {
  SvgRect($debut, 28, $fin, 38, $orange, $prog);
} else {
  SvgRect($debut, 28, $fin, 38, $rouge, NULL);
}

Voilà cela devrait suffire pour obtenir le HTML avec lequel on veut interagir.

Maintenant, le JavaScript !!!

Il va ressembler un peu beaucoup à celui du lien posté plus haut, c'est aussi le but du jeu. Je te le livre brut.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function SVGToolTip() {
  // récup. parent englobant les SVG
  const oParent = document.querySelector("#svg");
  // création et ajout élément tooltip
  const oInfo = document.createElement("DIV");
  oInfo.id = "info-SVG";
  oParent.append(oInfo);
 
  function _toggleInfo(e) {
    const elem = e.target;
    // inverse la class CSS
    elem.classList.toggle("rect-over");
    // récup. et formate la sortie tooltip
    const data = elem.dataset.prog.split("n,").pop().replace(","," - ");
    // remplace par le nouveau contenu
    oInfo.innerHTML = "mouseenter" === e.type ? "<h1>" + data + "</h1>" : "";
  }
 
  function _moveInfo(e) {
    oInfo.style.transform = "translate3d(" + e.layerX + "px," + e.layerY + "px, 0)";
  }
 
  // mouse move sur Parent
  oParent.addEventListener("mousemove", _moveInfo, true);
  // mouse enter/leave sur les RECT, le sélecteur serait à affiner
  const oElems = document.querySelectorAll("rect[fill='#f7a35c']");
  // affectation des events
  oElems.forEach(function (elem) {
    elem.style.cursor = "pointer";
    elem.addEventListener("mouseenter", _toggleInfo);
    elem.addEventListener("mouseleave", _toggleInfo);
  });
}
SVGToolTip();

Pour le faire fonctionner il faut également un peu de CSS, au final tu peux essayer avec :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITRE_PAGE</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link href="css/vue.css" rel="stylesheet" type="text/css" media="all">
<style>
.classTuile {
  position: relative;
  width: auto;
  height: auto;
  padding: 0 .5em 1em;
  max-width: 25em;        /*-- la largeur peut être modifiée sans soucis --*/
  background: linear-gradient(#000 0, #000 3em, #FFF 3em) repeat-x scroll 0 0 transparent;
}
.classTuile h2 {
  text-align: center;
  font-size: 1.5em;
  line-height: 2;
  color: white;
}
#info-SVG {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 .5em;
  border: 2px solid red;
  text-align: center;
  background-color: rgba(255,255,255,.8);
  transition: all 0.25s;
  pointer-events: none;
}
#info-SVG:empty {
  display: none;
}
.rect-over {
  fill: #F00;
}
</style>
</head>
<body>
<div id="svg" class="classTuile">
  <h2 class="">Programmation chauffage</h2>
<?php
include_once 'images/image.php';
$data = array(
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Lun.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Mar.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Mer.'),
  array( 'prog' => 'n,08:30,16:00', 'title' => 'Jeu.'),
  array( 'prog' => 'n,05:30,22:00', 'title' => 'Ven.'),
  array( 'prog' => 'n,00:00,24:00', 'title' => 'Sam.'),
  array( 'prog' => 'n,00:00,00:00', 'title' => 'Dim.'),
);
foreach( $data as $d){
  // function create_image($width, $height, $prog, $title) {
  echo create_image( 220, 40, $d['prog'], $d['title']);
}
?>
</div>
<script>
"use strict";
function SVGToolTip() {
  // récup. parent englobant les SVG
  const oParent = document.querySelector("#svg");
  // création et ajout élément tooltip
  const oInfo = document.createElement("DIV");
  oInfo.id = "info-SVG";
  oParent.append(oInfo);
 
  function _toggleInfo(e) {
    const elem = e.target;
    // inverse la class CSS
    elem.classList.toggle("rect-over");
    // récup. et formate la sortie tooltip
    const data = elem.dataset.prog.split("n,").pop().replace(","," - ");
    // remplace par le nouveau contenu
    oInfo.innerHTML = "mouseenter" === e.type ? "<h1>" + data + "</h1>" : "";
  }
 
  function _moveInfo(e) {
    oInfo.style.transform = "translate3d(" + e.layerX + "px," + e.layerY + "px, 0)";
  }
 
  // mouse move sur Parent
  oParent.addEventListener("mousemove", _moveInfo, true);
  // mouse enter/leave sur les RECT, le sélecteur serait à affiner
  const oElems = document.querySelectorAll("rect[fill='#f7a35c']");
  // affectation des events
  oElems.forEach(function (elem) {
    elem.style.cursor = "pointer";
    elem.addEventListener("mouseenter", _toggleInfo);
    elem.addEventListener("mouseleave", _toggleInfo);
  });
}
SVGToolTip();
</script>
</body>
</html>

on ne doit pas être loin de la vérité, tu devrais retrouver tes petits

Invité · 21/04/2022, 19h41

Bonsoir NoSmoking,

Merci pour ces précieuse recommandations et pour l'aide et les explications plus général.

J'ai modifier la façon de stocker les valeurs dans mon message précèdent (surtout les valeurs 'prog').
Pouvez-vous jeter un œil a "prog_code_de_base.zip" qui est aussi dans mon message précédent ?

Les valeurs ne doivent pas être en dur dans mes arrays.
Pour les valeurs "$jours" en php c'est ok, mais ce n'est pas la même histoire pour les valeurs 'prog' qui sont égale a "var idems" récupères en java.

Bien cordialement

**NoSmoking** · 22/04/2022, 11h47

Ce que je t'ai donné est un exemple opérationnel de comment l'on peut faire.

Pour les valeurs "$jours" en php c'est ok, mais ce n'est pas la même histoire pour les valeurs 'prog' qui sont égale a "var idems" récupères en java.

Quelque soit la façon de récupérer tes données il te faut au final avoir quelque chose qui pourrait ressembler à :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
include 'images/image.php';
$jours = [ "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
// données dynamiques provenant d'où tu veux
$items = [
  "n,05:30,22:00",
  "n,06:30,21:00",
  "n,07:30,20:00",
  "n,08:30,19:00",
  "n,09:30,18:00",
  "n,10:30,17:00",
  "n,11:30,16:00"
];
// traitement de ces données
for($i = 0; $i <= 6; $i += 1){    
  echo create_image( 220, 40, $items[$i], $jours[$i]);
}
?>

Cela « respecte » un peu plus la façon de ce que tu souhaites réaliser.

Invité · 22/04/2022, 13h38

Envoyé par NoSmoking

Ce que je t'ai donné est un exemple opérationnel de comment l'on peut faire.

Pas de problème de ce côté-là! Votre code est fonctionnel.

Envoyé par NoSmoking

Quelque soit la façon de récupérer tes données il te faut au final avoir quelque chose qui pourrait ressembler à :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
include 'images/image.php';
$jours = [ "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
// données dynamiques provenant d'où tu veux
$items = [
  "n,05:30,22:00",
  "n,06:30,21:00",
  "n,07:30,20:00",
  "n,08:30,19:00",
  "n,09:30,18:00",
  "n,10:30,17:00",
  "n,11:30,16:00"
];
// traitement de ces données
for($i = 0; $i <= 6; $i += 1){    
  echo create_image( 220, 40, $items[$i], $jours[$i]);
}
?>

Cela « respecte » un peu plus la façon de ce que tu souhaites réaliser.

Mon problème est la!
Votre exemple utilise un $items codé en PHP
Mon besoin est de récupérer items codé en java pour le traiter sous PHP via l'appel de " id="idHeaSch0, id="idHeaSch1 ….) pour chaque array! Est c'est là que je bloque.
Je ne peux pas modifier le code java car c'est toute une API qu'il y a derrière.

**NoSmoking** · 22/04/2022, 17h37

Pas de problème de ce côté-là! Votre code est fonctionnel.

Donc cette discussion est résolue quant au sujet de départ : [SVG] Afficher une Tooltip.

Mon besoin est de récupérer items codé en java pour le traiter sous PHP via l'appel de " id="idHeaSch0, id="idHeaSch1 ….) pour chaque array! Est c'est là que je bloque.
Je ne peux pas modifier le code java car c'est toute une API qu'il y a derrière.

Ton soucis va donc bien au delà de cette discussion et porte sur la récupération de données d'une API en PHP, il est donc nécessaire d'ouvrir une nouvelle discussion sur le forum dédié : Forum PHP.
Juste pour information, il existe des fonctions pour faire cela comme file_get_contents ou encore la Bibliothèque d'cURL.

Merci d'en tenir compte !

Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.

Invité · 22/04/2022, 18h35

Bonjour,

J'avais bien pensé à la création d'un nouveau message, mais vu que je n'avais pas ce problème avec le code d'origine "avant la transformation en fonction" et que cela touche au code java !

Je me suis mal exprimer ! Le code de récupération des informations de l'API est fonctionnel, les requêtes sont faites en java.

Pour revenir au code qui me pose problème suite à nos modifications

Ce qui fonctionnait avant (PHP + JAVA):

Code PHP (traitement "prog" et "$jours"):

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img class="classProg" id="idHeaSch0"
src="images/image.php?width=220&height=40&prog=''&title=<?php echo $jours[0];?>">
</img>

Code JAVA (data "prog" et "$jours"):

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#idHeaSch0').attr('src', "images/image.php?width=220&height=40&prog=" +
items[0] +
"&title=<?php echo $jours[0];?>"
);

Depuis la mise en place de la fonction, je ne sais plus récupérer la valeur de "prog" depuis mes "array" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

array('prog' => '?', 'title' => $jours[0]),

L'erreur que j'ai faite au début, est de fixer les valeurs au mauvais endroit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

array('prog' => 'n,05:30,22:00', 'title' => 'Lun'),

Pour résoudre le problème, je pense qu'il ne faudrait pas passer par des "array" et faire l'appel à la fonction create_image pour chaque image du formulaire html.

Donc garder cette structure qui utilise l'id nécessaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img class="classProg" id="idHeaSch0"
< - -  appel de la fonction create_image pour le prog0 et le jour0  - - >
</img>

Et utiliser la fonction java "function ChargerDatas()".

Je ne parviens pas à le mettre en place, pouvez-vous m'aider?

Pour vous montrer ce que j'ai essayé, je joins le projet "simplifier" sans les info-bulles, je réintégrerais le code plus tard !

Dite-moi si je dois quand même créer un nouveau message.

Bien cordialement

Invité · 26/04/2022, 01h22

Bonjour NoSmoking, Bonjour a tous,

J'ai fini par identifier mon problème.

J'utilise une variable javascript ( items[0] ) dans du code php. Le code php étant exécuté sur le serveur et le code javascript sur le client, difficile de s'en sortir sans "bidouille" du genre :

Appeler ma variable depuis php:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php
$variable_php = '<script type="text/javascript">document.write(variable_js);</script>';
?>

Ou inversement :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var variable_js = '<?php echo $variable_php; ?>';

Solution, créer le svg en javascript !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
body{
  background: #36b0b6;
}
 
.classTuile {
  width: 250px;
  height: 395px;
  padding: 6px;
  margin-top: 20px;
  margin-left:20px;
  position: relative;
  background-color: #FFFFFF;
  outline: 1px solid #A0A0A0;
  outline-offset: -1px;
  border-radius: 12px;
  color: #000000;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
  /*font-family: "Segoe UI";*/
}
 
.classTitre {
  position: absolute;
  width: 100%;
  height: 28px;
  text-align: center;
  font-size: 14px;
  background-color: #3e3e42;
  color: #fff;
  border-radius: 11px 11px 0 0;
  outline: 1px solid #A0A0A0;
  outline-offset: -1px;
  margin-left: -6px;
  margin-top: -6px;
  -webkit-border-radius: 11px 11px 0 0;
  border-bottom: 4px solid #ff0000;
}
 
.classProg {
  position: relative;
  width: 220px;
  height: 40px;
  top: 8px;
  margin-left: 10px;
  margin-top: 8px;
}
.enabledinfobulle {
  cursor: pointer;
}
 
  .infobulle {
  pointer-events: none;
  position: absolute;
  font-size: 14px;
  text-align: center;
  background: #eee;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 5;
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  color: #21669e;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #eee;
    -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: none;
}
 
  .infobulle.active {
  display: block;
}
 
  .infobulle:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #eee;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$jours = array("Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim");
?>
<html>
<head>
  <title><?php echo "TITRE_PAGE";?></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <link href="css/vue.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
  <div class="classTuile">
      <span class="classTitre"><?php echo "Programmation chauffage";?></span>
      </br>
      <svg id="idHeaSch0" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
      <svg id="idHeaSch1" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
      <svg id="idHeaSch2" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
      <svg id="idHeaSch3" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
      <svg id="idHeaSch4" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
      <svg id="idHeaSch5" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
      <svg id="idHeaSch6" class="classProg" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
      </br>
   </div>
   <div class="infobulle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
var svgNS = "http://www.w3.org/2000/svg";
 
function createSvgLine(idParent, x1, y1, x2, y2, color) {
    var myLine = document.createElementNS(svgNS, "line");
    myLine.setAttributeNS(null, "x1", x1);
    myLine.setAttributeNS(null, "y1", y1);
    myLine.setAttributeNS(null, "x2", x2);
    myLine.setAttributeNS(null, "y2", y2);
    myLine.setAttributeNS(null, "fill", "none");
    myLine.setAttributeNS(null, "stroke", color);
 
    idParent.appendChild(myLine);
}
 
function createSvgText(idParent, x, y, str, size, color, fontname, anchor) {
    var myText = document.createElementNS(svgNS, "text");
    myText.setAttributeNS(null, "x", x);
    myText.setAttributeNS(null, "y", y);
    myText.setAttributeNS(null, "fill", color);
    myText.setAttributeNS(null, "stroke", "none");
    myText.setAttributeNS(null, "font-family", fontname);
    myText.setAttributeNS(null, "font-size", size);
    myText.setAttributeNS(null, "text-anchor", anchor);
    myText.innerHTML = str;
 
    idParent.appendChild(myText);
}
 
function createSvgRect(idParent, x1, y1, x2, y2, color, enabled, id) {
    var w = x2 - x1;
    var h = y2 - y1;
    var myRect = document.createElementNS(svgNS, "rect");
    myRect.setAttributeNS(null, "x", x1);
    myRect.setAttributeNS(null, "y", y1);
    myRect.setAttributeNS(null, "width", w);
    myRect.setAttributeNS(null, "height", h);
    myRect.setAttributeNS(null, "fill", color);
    myRect.setAttributeNS(null, "stroke", "none");
    if (enabled) {
        myRect.setAttributeNS(null, "id", id);
        myRect.setAttributeNS(null, "class", "enabledinfobulle");
    }
 
    idParent.appendChild(myRect);
}
 
function createSvg(id, prog, title) {
    var idSvg = document.getElementById(id);
 
    while (idSvg.firstChild) {
        idSvg.firstChild.remove()
    }
 
    var gris = "#808080";
    var grisClair = "#C0C0C0";
    var noir = "#000000";
    var bleuclair = "#7cb6ec";
    var orange = "#f7a35c";
    var rouge = "#f45b5b";
 
    var font = "Segoe UI";
    var fontSize = "14";
 
    var titleX = 0;
    var titleY = 30;
 
    var i;
    var str;
    var strY = 12;
    var offsetGauche = 34;
    var offsetDroit = 15;
    var n = Math.floor((220 - offsetGauche - offsetDroit) / 24);
    var taille = n * 24;
 
    for (i = 0; i <= 24; i++) {
        var x = i * n + offsetGauche;
        if ((i % 6) == 0) {
            createSvgLine(idSvg, x, 15, x, 27, gris);
            if (i < 12) {
                str = '0' + i + ':00';
            } else {
                str = i + ':00';
            }
            createSvgText(idSvg, x, strY, str, fontSize, gris, font, "middle");
        } else {
            createSvgLine(idSvg, x, 20, x, 27, grisClair);
        }
    }
 
    createSvgText(idSvg, titleX, titleY, title, fontSize, noir, font, "start");
    createSvgRect(idSvg, offsetGauche, 28, taille + offsetGauche, 38, bleuclair, false, "");
 
    if (prog !== '') {
        var progs = prog.split(',');
        n = progs.length;
        if ((n % 3) == 0) {
            for (i = 0; i < n; i += 3) {
                var mode = progs[i];
                var start = progs[i + 1];
                var end = progs[i + 2];
                nombres = start.split(':');
                var debut = parseInt(nombres[0]) * 60 + parseInt(nombres[1]);
                debut = offsetGauche + taille * debut / 1440;
                nombres = end.split(':');
                var fin = parseInt(nombres[0]) * 60 + parseInt(nombres[1]);
                fin = offsetGauche + taille * fin / 1440;
                if (mode == 'n') {
                    createSvgRect(idSvg, debut, 28, fin, 38, orange, true, start + " " + end);
                } else {
                    SvgRect(idSvg, debut, 28, fin, 38, rouge, true, start + " " + end);
                }
            }
        }
    }
}
 
var items = ["n,05:30,22:00",
       "n,06:30,21:00",
       "n,07:30,20:00",
       "n,08:30,19:00",
       "n,09:30,18:00",
       "n,00:00,24:00",
       "n,00:00,00:00"];
 
createSvg("idHeaSch0", items[0], "<?php echo $jours[0];?>")
createSvg("idHeaSch1", items[1], "<?php echo $jours[1];?>")
createSvg("idHeaSch2", items[2], "<?php echo $jours[2];?>")
createSvg("idHeaSch3", items[3], "<?php echo $jours[3];?>")
createSvg("idHeaSch4", items[4], "<?php echo $jours[4];?>")
createSvg("idHeaSch5", items[5], "<?php echo $jours[5];?>")
createSvg("idHeaSch6", items[6], "<?php echo $jours[6];?>")
 
$infobulle = $(".infobulle");
 
$('.enabledinfobulle').hover(function() {
    $infobulle.addClass('active');
    $infobulle.html($(this).attr('id'));
}, function() {
    $infobulle.removeClass('active');
});
$(document).on('mousemove', function(e) {
    $infobulle.css({
        left: e.pageX ,
        top: e.pageY - 50
    });
});
</script>
</body>
</html>

Bien cordialement

[SVG] Afficher une Tooltip

JavaScript

Discussions similaires

Partager

Partager