caret disappears if content is more than one liner

[mubasshir]

When I have content one liner, caret appears.
But when I have content more than one liner, caret disappears and flat rectangle appears.

Any solution to this?

<i class="icon ion-ios-information-outline fa fa-2x right-icon" tooltips tooltip-side="left" tooltip-try="1" tooltip-content="Enter your personal number"></i>

[45kb]

@mubasshir Hi, this is weird, have you tried like this:

<span tooltips tooltip-side="left" tooltip-try="1" tooltip-content="Enter your personal number"> <i class="icon ion-ios-information-outline fa fa-2x right-icon"></i> </span>

It could be a css problem but can you please provide a working plunkr or jsfiddle to replicate the problem?

thank you

[mubasshir]

hey,
sorry I tried CodePen but failed. I'm using Ionic Framework, and I have made many changes which are difficult to replicate.

When I adjust left of tooltip class from inspect, it becomes one liner and caret appears.

PS: when add more text in inspect, again caret disappears.

[45kb]

Hi @mubasshir what you mean by "adjust left of tooltip class" ?

Have you tried with the code i attached above?
Does this happens only on <i> elements?

I bet ionic css or something is changing the tooltip css behavior in some way, you should check deeply if something collide, actually i am unable to replicate the problem and see what's happening....

[45kb]

Also please try with this:

<i tooltip-content="<div>Hi</div><div>I am a new line inside tooltip</div>"></i>

[mubasshir]

hey,
it did not work me. Also, instead of showing content its shows
<div>Hi</div><div>I am a new line inside tooltip</div>

Do I need to make html-escape=false or something?

[45kb]

@mubasshir It's hard to replicate your problem, i tried without any success, if you can provide a working example we can investigate, otherwise, unfortunately, we don't know how to help you.

I am going to close the issue (for the moment), we can still talk here and i'll be glad to help you.

[limax84]

@45kb I'm sorry if I'm off topic. However that thread is the closest to what I'm trying to do with 720kb-tooltips.
I'm trying to display two separate lines within my tooltip.
As you suggested above to try this :
<i tooltip-content="<div>Hi</div><div>I am a new line inside tooltip</div>"></i>
I'm guessing there is a way to achieve this, but this code just display the HTML code in the tooltip.
Is there an option to allow HTML code to be interpreted within the tooltip content ?