Faire défiler les données du texte au passage de la souris

Question

Je veux afficher les données textuelles au survol de l'écran de l'utilisateur. 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 boîte de survol ... Je sais que c'est possible de le faire mais je ne peux rien obtenir sur le web ... Jusqu'à présent, je suis capable d'afficher les données initialisées dans la partie contrôleur, mais je suis incapable de définir le défilement et de maintenir l'apparence du texte.

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

Answer 1

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

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

Voir Plunker

Answer 2

Ce n'est pas une solution angulaire, mais vous pouvez produire l'effet désiré avec un peu de css. Il suffit d'ajouter une nouvelle classe à votre span (j'ai utilisé fa-warning--custom ) et mettez de nouveaux css dans votre fichier css.

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

Notez que la solution titre et la popup css apparaissent toutes deux en même temps. Vous pouvez résoudre ce problème en changeant le nom de l'élément span 's title à quelque chose d'autre, comme data-title mais assurez-vous d'effectuer le même changement dans le fichier attr() dans le css.

Comme il s'agit de 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>

Answer 3

Faites quelque chose comme ceci au lieu de l'info-bulle

 <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>