Bonjour,

Sur chaque ligne de mon tableau initial (HTML), j'ai un icone en début de ligne (dans la première case <td>). Au passage de la souris sur cet icone, je souhaite afficher des données dans une info-bulle. Ces donnés sont présentes dans une directive que je souhaiterais afficher sous la forme d'info-bulles.

Pour l'instant, a chaque passage de ma souris sur cet icone, j'affiche un tableau (contenu dans ma directive) dans la premiere cellule de mon tableau initial (un tableau dans un tableau...), ce qui n'est pas très esthétique

Savez vous si cela est possible d'afficher une directive à l'interieur d'info-bulles ? Si oui, comment je pourrais faire ? (Un peu sous cette forme : http://tippedjs.com/documentation - Rubrique AJAX DELEGATION, mais cette solution est payante et trop chère ...) 

Pour résumer, je souhaite afficher un tableau dynamique dans des info-bulles

-Mon tableau:

<table id="project_information_table" table-dyna ng-table="project_information_table" class="table table-bordered table-striped">
<tr id="{{$index+1}}" ng-repeat="information in $data">

<td style="width:15px;" ng-mouseleave="unshow_activity_directive({})">
<span class="glyphicon glyphicon-plus-sign" style="position:relative;left:32px;bottom:50px;top:35px;" ng-click="show_activity_directive({})"></span>
<child></child> (ma directive)
</td>
<td> ... mes autres colonnes ... </td>

-Mon JS:

$scope.show_activity = function(){
  $scope.body = {
      projects_id: this.information.id
    };
   $http.post('/api/project_activities', $scope.body).success(function(data) {
     $scope.project_activity_information_list = localize.localizeData(data);
        if($scope.project_activity_information_table) {
          $scope.reload_dynamic_table($scope.project_activity_information_table, $scope.project_activity_information_list);
        }
        else {
          $scope.project_activity_information_table = $scope.create_dynamic_table($scope.project_activity_information_list, 'project_activity_information_list');
        }
  });
};

-Contenu de ma directive child.js:

return {
        restrict: 'E',
        replace: true,
        transclude: true, 
        scope: false, 
        templateUrl: '/child_d.html',
        controller: 'ChildCtrl',
        link: function($scope, element, attrs) {
            $scope.activity_showed = false;
            $scope.show_activity_directive = function show_activity(){
                $scope.activity_showed = true;
                $scope.show_activity();
            };
            $scope.unshow_activity_directive = function unshow_activity(){
                $scope.activity_showed = false;
            };
        }
    }

-child.html:

<div class="col-md-12" ng-show="activity_showed" style="float:right;left:32px;bottom:50px;top:35px">     
    <div class="panel panel-default">
             <table table-dyna ng-table="project_activity_information_table" class="table table-bordered table-striped">
                <tr ng-repeat="activities in $data">
                    <td>{{activities}}
                    </td>
                 <td>mes autres colonnes ....
                    </td>
                </tr>
           </table> 
   </div>
</div>

J'espere avoir été clair

Merci pour vos réponses.

-
Edité par elgringo95 19 septembre 2017 à 11:01:29

Re-Bonjour du coup,

je ne connais pas de plugin/librairie pour faire cela (même si je pense que ce serait le plus simple).

Mais je pense que partir sur quelque chose comme ça : http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS 

avec du code à la main pour la gestion en AJAX pourrait être une solution ?

Bonne chance

Re-bonjour kokoal

Les transitions sont top, je pense les utiliser Cependant, les textes bleus qui sont affichés dans ces info-bulles sont des textes écrit statiquement. Je voudrais afficher les résultats d'une requete http dans ces info-bulles, donc qui change à chaque requete ... j'ai déja mes requetes d'affectués avec mes données, j'aimerais bien les mettre dans ces info-bulles dynamiquement.

Mon petit tableau, j'aimerais l'afficher dans une petite info-bulle plus discrete, qui n'agrandirait pas la grandeur de ma premiere colonne ....

-
Edité par elgringo95 21 septembre 2017 à 12:08:33

Et bien je ne vois pas trop où est le problème, si tu as tes données issues d'une requête et tes info-bulles ?

Il faut juste que tu travail un peu pour récupérer les éléments HTML qui contiendront tes infos-bulles et y mettre tes données lors de l'appel AJAX.

Par exemple si tu utilise des "span" pour stocker le contenu de l'info bulle (comme dans l'exemple donnée) il te faudra récupérer tout ces spans (surement en leurs donnant un id dynamique au chargement de la page ou en faisant une recherche) et insérer tes données lors de la récupération de celles-ci.

Ton tableau c'est du code HTML au final, il faudra juste le mettre dans la balise contenant de ton info-bulle.

Tu as une question, ou cela te paraît jouable ? 

-
Edité par kokoal 19 septembre 2017 à 12:20:36

J'ai mes différents petits tableaux (résultant de mes différentes requêtes) qui apparaissent dans mes info-bulles.

Si j'ai bien compris, maintenant j'ai a modifier le style de mon span pour le rendre plus discret ??

J'aimerais qu'il apparaisse devant mon tableau initial (au premiers plan), et pas dans la cellule de mon tableau par exemple ... parce que là quand j'active l'apparition de mes petits tableaux, ma 1ère colonne s'agrandit (même en fixant la largeur de ma celulle avec style="width:15px;") ...

-
Edité par elgringo95 19 septembre 2017 à 13:00:23

Sans visuel (code/capture) j'ai un peu du mal à voir où tu en ais...

Mais d'après ce que j'ai compris tu as tes "span" remplis mais ils ne sont pas encore stylisé en info-bulle ?

Si c'est le cas, alors oui, tu as juste à adapter le tout pour le résultat voulu (en t'inspirant par exemple du lien que je t'ai donné.

-
Edité par kokoal 19 septembre 2017 à 13:01:55

Oui c'est ça, mes bulles sont bien remplis,en premier plan, MAIS agissent sur la largeur de la première colonne du tableau initial .... et je sais pas pourquoi j'ai pourtant fixer sa largeur à 15pixels et je ne veux pas que sa largeur change à chaque appel de mes bulles ! En faite, la largeur de ma 1ère colonne s'ajuste par rapport à la largeur de mon petit tableau, ce qui ne me va pas Une idée pour que ma largeur reste fixe ? (En gros que ma bulle cache une partie des colonnes de mon grand tableau).

On peut avoir ton code html/css (je pense que ton problème vient de là)

As-tu passé les info-bulles en "position: absolute" comme dans l'exemple que je t'ai donné ?

• J'ai réussi à fixer la largeur de ma première colonne avec max-witdh

Maintenant il faut que ma bulle dépasse de ma premiere colonne (en gros qu'il passe au dessus de ma colonne projet) mais je n'y arrive pas

Le code de ma bulle :

<div class="col-md-12" ng-show="activity_showed" style="position:absolute;overflow:visible;left:0px;bottom:50px;top:-10px;position:relative;z-index:1200;">
    <div class="panel panel-default">
        <div class="panel-body table-responsive">
             <table table-dyna ng-table="project_activity_information_table" class="table table-bordered table-striped">
...les infos de mon tableau....
             </table> 
        </div>
   </div>
</div>

L'endroit où sont situé mes bulles :

<div class="col-md-12">     
        <div class="panel panel-default">
            <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> <span data-i18n="Project List"></span></strong></div>
            <div class="panel-body table-responsive">
                <table id="project_information_table" table-dyna ng-table="project_information_table" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>MORE INFORMATION</th>
                    <th>PROJECT</th>
                    <th> .... </th> 
                  </tr>
                </thead>

                <tbody>
                <tr id="{{$index+1}}" ng-repeat="information in $data">
                    <td style="max-width:10px;width:10px;">
                        <span class="glyphicon glyphicon-plus-sign" style="position:relative;left:45px;bottom:50px;top:35px;" ng-mouseover="show_directive({})"></span>
                        <child ng-mouseleave="unshow_activity_directive({})"></child>
                    </td>
                    <td> .... la suite .... </td>

une partie de ma feuille css:

@media (min-width: 992px) {
  .col-md-12 {
    float: left;
  }
.panel {
  margin-bottom: 0;
  border-radius: 0;
  overflow: hidden;
}
.table-responsive {
  overflow-x: auto;
}
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd;
    -webkit-overflow-scrolling: touch;
  }
.table-dynamic .table-bordered th {
  position: relative;
}

Je pensais que mon petit tableau allait depasser avec style="position:absolute;overflow:visible;" et l'attribut z-index mais rien n'y fait :( 

Il n'y a pas un attribut qui permet de faire dépasser le contenu de son conteneur ???

-
Edité par elgringo95 21 septembre 2017 à 12:08:50

Bon,

déjà ce n'est pas très propre, on voit que tu as bidouillé dans tout les sens, essaie d'enlever les attributs CSS de ton HTML et de tout bien externaliser dans une feuille de style pour que se soit plus facile à corriger (pour toi et pour tes relecteurs).

Du coup c'est pas propre, donc pas facile à débuger et tu as loupé une erreur grosse comme une maison : dans ta balise style tu mets bien "position: absolute" mais quelques attributs plus loin tu as aussi laissé/rajouté "position: relative", c'est donc le deuxième qui est pris en compte ....

Y a peut être d'autres choses mais de ce que j'ai vu ton problème vient surement de là !

Même si tu craque un peu sur ton code essai de rester le plus compréhensible possible en écrivant tu te remerciera quelques heures plus tard.

Une fois que tu auras plus ou moins le comportement que tu veux essai d'écrémer un peu ton CSS pour voir ce qui est vraiment utile et enlevé ce qui ne l'ai pas et qui te fera surement des conflits plus tard.

PS : l'overflow ne sert à rien dans ton cas

-
Edité par kokoal 20 septembre 2017 à 15:02:50

Je reconnais que mon code n'est pas très propre mais je comptais externaliser tout mon style une fois finie (parce que pour faire des tests en live, c'est plus pratique...) Je prend note de tes conseils, merci :).

Ensuite, oui tu as raison, j'ai fait une boulette. J'ai donc enlevé le position:"relative", au final ma bulle s'affiche bien au dessus de mon tableau , mais à 1 endroit sur ma page (et plus à coté de chacun de mes bouttons ....) Il faudrait peut etre que je le laisse en position relative non ???

(Pour l'overflow, oui j'ai vu que ca ne marchait pas mais je ne sais pas pourquoi ...)

Non je pense que l'absolute est nécessaire il faut juste placer tes bulles avec les attributs de positionnement (top, bottom, right, left) et les marges (margin).

Tu y es presque, tu vas y arriver

c'est bon j'ai trouvé

je récupère la position de mes boutons et j'ajuste à l'aide d'une fonction ma position de ma bulle :) 

Je ne sais pas si c'est une solution optimale par contre ....

Merci pour ton aide kokal.

-
Edité par elgringo95 21 septembre 2017 à 12:07:59