-1

I am trying to add an image before each new line. So I am able to achieve this

Apple
Ball
Cat
Dog

but I want to add image before in every new line

(img) Apple
(img) Ball
(img) Cat
(img) Dog

The code

this.tooltipTitle = "Apple,Ball,Cat,Dog,Elephant"

create() {
  this.tooltip = this.renderer.createElement('div');
  this.tooltipTitle.split(',').forEach((text) => {
  this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
  this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
  this.renderer.appendChild(document.body, this.tooltip);
 });
}

this.renderer.addClass(this.tooltip,'classA')

 .classA{
   positon:absolute;
   max-width: 150px;
   font-size: 14px;
   color: black;
   padding: 3px 8px;
   background: grey;
   border-radius: 4px;
   z-index: 100;
   opacity: 0;
 }

So the addClass is adding styles to the whole tooltip. That is good and working what I am further trying is to add an image at beginning of new line as well.

Edit

After trying a lot I am able to add the image "but" it is only getting added to the last value not to the previous values (whereas I want to add image on every new line).

this.tooltip = this.renderer.createElement('div');
this.imgforres = this.renderer.createElement('img');
this.imgsrc = 
this.renderer.setAttribute(this.imgforres,"src",
"assets/images/restriction.png")

this.tooltipTitle.split(',').forEach((text) => {
this.renderer.appendChild(this.tooltip,this.imgforres);
this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));
this.renderer.appendChild(document.body, this.tooltip);
});

Latest

Now I have achieved I get the image before every new line of text, thanks to Yuri for his response. One last glitch is if the text is long it surely wraps up but the indentation is not with the above line text, it starts below the image:

<img> Apple
<img> Ball
<img> So this a long text
and it starts from below 
the image
<img> Cat

Expected

<img> Apple
<img> Ball
<img> So this a long text
      and it starts from 
      below the image
<img> Cat

I have tried word-break, justify, it's not helping. Maybe I'll have to embed this text in a div or p tag, and then give styling to those.

halfer
  • 19,824
  • 17
  • 99
  • 186
Enthu
  • 512
  • 2
  • 13
  • 38

2 Answers2

2
      this.tooltip = this.renderer.createElement('div');
      this.tooltipTitle.split(',').forEach((text) => {
      this.renderer.appendChild(this.tooltip, this.renderer.createText(text));
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      var img2 = document.createElement('img'); // Use DOM HTMLImageElement
      img2.src = 'image2.jpg';
      img2.alt = 'alt text';
      this.renderer.appendChild(this.tooltip,img2);
      this.renderer.appendChild(this.tooltip, this.renderer.createElement('br'));

      this.renderer.appendChild(document.body, this.tooltip);
    });

enter image description here

Another layout enter image description here

Yuri S
  • 5,355
  • 1
  • 15
  • 23
  • Thanks, this thing I have already done I guess, but I need to incorporate this thing in renderer as shown in my code, I have created an image tag and have assigned the src attribute , but the issue is it only gets appended to the last value , I am trying to append image tag in every new line – Enthu Jan 28 '19 at 18:14
  • Updated my answer. You don't have images in your sample online project, so I just used one empty. – Yuri S Jan 28 '19 at 21:28
  • Hi @Yuri S I am able to add the styles , now only my last issue is , how can I wrap the text if it too long reason being if the text is long it comes below the image, is there a way so that I can wrap the long text within that div ,thanks – Enthu Jan 29 '19 at 11:03
  • I have tried word break, justify it pushes down the remaining text to the next line but below the image , I want to ident it just below the starting point of the first line, not below the image, I hope I make sense what I am trying to say – Enthu Jan 29 '19 at 12:04
  • This is CSS question. I suggest to create a new question and tag it CSS. – Yuri S Jan 29 '19 at 16:04
0

You can try something like this -

create(){
  this.tooltip = this.renderer.createElement('div');

    this.tooltipTitle.split(',').forEach((text) => {
      let container = this.renderer.createElement('div');
      let img = this.renderer.createElement('img');
      this.renderer.setAttribute(img, "src", "assets/images/restriction.png");
      this.renderer.appendChild(container, img);

      let textSpan = this.renderer.createElement('span');
      this.renderer.appendChild(textSpan, this.renderer.createText(text));
      this.renderer.appendChild(container, textSpan);

      this.renderer.appendChild(this.tooltip, container);
    });

    this.renderer.appendChild(document.body, this.tooltip);
}

In html, I kept an inline css which you can have in separate file and load it by calling this.renderer.addClass()

<style>
  span { 
    margin-left: 10px;
    display:inline-flex;
    width:150px;
    word-wrap:break-word;
} 
</style>

Here's my test tooltipTitles -

tooltipTitle = "Apple,Ball,Cat,Dog,Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant Elephant ";

And here's the output screenshot

Test Output

reezvi
  • 46
  • 4