Widget : Icone avec contenu au survol

Bonjour à tous

Si ca peut intéresser qqun, j’avais envie d’avoir le contenu d’un commande info/autre sur le dashbord mais pas forcement qu’elle s’affiche pour ne pas prendre trop de place

alors j’ai fait ce petit widget, qui affiche une icone et avec la souris dessus, c’est la valeur de la commande qui s’affiche

image

image

paramètres :

  • icone : une icone, si non présent par défaut « far fa-question-circle »
  • taille de l’icone, si non présent par défaut « 20 »
  • couleur de l’icone, si non présent par défaut « white »
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="InfoSurvol" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm ">
    <span class="ICONE#uid#" id="ICONE#uid#"></span>
  </div>


  <script>
    jeedom.cmd.update['#id#'] = function(_options){     
      	// Récupération des valeurs des paramètres
        var iconeaff = ('#icone#' !='#'+'icone#') ? "#icone#":"far fa-question-circle";
      	var iconetaille = ('#taille#' !='#'+'taille#') ? "#taille#":"20";
      	var iconecolor = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"white";      

      	// Taille icone
		$('.cmd[data-cmd_uid=#uid#] .ICONE#uid#').empty().append("<i class='"+iconeaff+"'></i>");
      	// Couleur icone
      	$('.cmd[data-cmd_uid=#uid#] .ICONE#uid#').attr('style', 'font-size: '+iconetaille+'px;color: '+iconecolor+';');   
		// Contenu du survol
      	$('.cmd[data-cmd_id=#id#]').attr('title','#state# #unite#')
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>
2 J'aimes