Je veux afficher les données de texte au survol du warning icon qui devrait avoir un défilement et nous pouvons faire défiler vers le haut et vers le bas les données contenues dans la zone de survol ... Je sais que c'est possible mais impossible d'obtenir quoi que ce soit web .. Jusqu'à présent, je suis en mesure d'afficher les données en cours d'initialisation dans la partie contrôleur, mais je ne suis pas en mesure de définir le défilement et de maintenir l'apparence du texte.

https://plnkr.co/edit/IhS8Nn9VCgFgucAHmckW?p=preview

2
Prabhat Mishra 17 avril 2018 à 15:23

3 réponses

Meilleure réponse

Ce n'est pas une solution angulaire, mais vous pouvez produire l'effet souhaité avec un peu de CSS. Ajoutez simplement une nouvelle classe à votre span (j'ai utilisé fa-warning--custom) et mettez un nouveau CSS dans votre fichier CSS.

Si vous voulez coder en dur l'avertissement dans l'attribut content du CSS, vous pouvez, mais la solution attr(title) fonctionne avec les données du guidon, au moins dans le Plunker.

Notez que la solution de titre et la fenêtre contextuelle css apparaissent simultanément. Vous pouvez résoudre ce problème en modifiant le nom de l'attribut span du span par quelque chose d'autre, comme data-title, mais assurez-vous de faire la même modification dans attr() dans le css.

Parce que c'est tout CSS, vous pouvez modifier et personnaliser le bloc de survol comme vous le souhaitez.

.fa-warning--custom {
  position: relative;
  top: 0;
  left: 0;
}

.fa-warning--custom::after {
  content: attr(title);
  position:absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 150px;
  overflow-y: scroll;
  background-color: white;
  word-wrap: break-word;
  z-index: 3;
  display: none;
  
}

.fa-warning--custom:hover::after {
  display: block;
}

/* the following css is for demonstration, you don't need it */

.fa-warning--custom {
  background-color: lightgray;
}

.tile {
  border: 1px solid blue;
  padding: 0px 3px;
  background: lightgray;
}
<span class="tile"><span ng-if=true  class="fa fa-warning fa-warning--custom" style="font-size:15px;color:red" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">!</span></span>
<span class="tile"><span ng-if=true  class="fa fa-warning fa-warning--custom" style="font-size:15px;color:red" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">!</span></span>
1
wassona 17 avril 2018 à 13:54

Faites quelque chose comme ça au lieu de l'infobulle

 <style>
  #hoveredText {
    position:absolute;
    top:0px;
    max-height:100px;
    overflow: scroll;
    display:none;
  }

  #warningText {
    position: relative;
  }

  #warningText span:hover + #hoveredText {
    display:block;
  }
</style>

Le code HTML serait:

<h1>Hello Plunker!</h1>
<span id="warningText"> 
  <span ng-if="true"  class="fa fa-warning" style="font-size:15px;color:red"></span>
  <div id="hoveredText">
    <pre>
      Dummy text
      Dummy text
      Dummy textDummy text

      Dummy text
      Dummy text
      Dummy text
    </pre>
  </div>
</span>
0
Shyam Tayal 17 avril 2018 à 12:40

Je pense que le défilement ne fonctionne pas avec les info-bulles, mais le multiligne peut être fait de cette façon:

$scope.hoverData = $scope.hoverData.match(/.{1,10}/g).join("\n")

Voir Plunker

1
raul.vila 17 avril 2018 à 12:33