There is a way to use the ejs-tooltip not as a component?

[Cesar Smerling]

Hi!

I want to use the ejs-tooltip in a different way that exposed in the document (as a component, html markup):

<ejs-tooltip content="tooltip text" target="id">

<component-with-tooltip id="id"></component-with-tooltip>

</ejs-tooltip>
 Copy

This way creates some problems with the syltings because adds another element, so css classes with child selector (> *) sometimes creates problems.

Is there another way to create a tooltip associated with a component, could be a directive like this:

<component-with-tooltip ejs-tooltip content="tooltip text"></component-with-tooltip>
 Copy

Thanks

[Sharon Sanchez Selvaraj]

Hi Cesar, 

 

Greetings from Syncfusion support. 

 

We have checked with your requirement in Tooltip. 

 

We would like to mention that, you can render Tooltip as a separate TS file and you can pass the required target and content value based on your requirement to the tag.  

 

Refer to the sample below. 

 

https://stackblitz.com/edit/angular-6xsnmr-l1lujl?file=app.component.html 

 

If we have misunderstood, please provide the following details on your exact scenario to serve you better. 

 

1. Exact difficulties you are facing while rendering the Tooltip in the usual way?
2. The component for which the Tooltip must be rendered.
3. Share your exact use case requirement with existing code blocks(if possible) or a screenshot demonstrating the scenario.

 

Regards, 

Sharon Sanchez S. 

[Cesar Smerling]

Thanks a lot, this is what I was trying to achived, build a directive for the tooltip.

Also, there is a way to pass a TemplateRef of angular as the content? Like this:

<div class="control-section">

  <div>

    <button

      id="testButton"

      tooltip

      [content]="tooltipTemplate"

      [target]="'#testButton'"

    >

      Show Tooltip

    </button>

  </div>

</div>

<ng-template #tooltipTemplate> Hi! {{ name }} </ng-template>

[Sharon Sanchez Selvaraj]

Hi Cesar, 

 

Thanks for the details. 

 

We have modified the sample to achieve your requirement to use ng-template as the Tooltip content. We have passed an additional parameter and accessed the template data using the embeddedView. 

 

Refer to the sample: 

 

https://stackblitz.com/edit/angular-6xsnmr-ad5bjr?file=app.component.html 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Cesar Smerling]

Thanks a lot, i'll try it out on our project.

[Cesar Smerling]

Hi, trying the example, doesn't responde my question.

In the ng-template I have a variable {{ name }}, when I add that variable is not shown in the tooltip.

[Sharon Sanchez Selvaraj]

Hi Cesar, 

 

Thanks for the details. 

 

We have checked with your requirement. We suggest you to use the title attribute to update the Tooltip content. By passing the required data in the below way, your reported scenario can be achieved. 

 

Refer to the code snippet: 

 

<div class="control-section"> 

  <div> 

    <button 

      id="testButton" 

      title="<i>Hello {{ name }}</i>" 

      tooltip 

      [target]="'#testButton'" 

    > 

      Show Tooltip 

    </button> 

  </div> 

</div> 

 

 

 

Refer to the sample: 

 

https://stackblitz.com/edit/angular-6xsnmr-udybcn?file=app.component.html 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S. 

[Cesar Smerling]

Hi, thanks for the reply. This will not work for us. We use ng-template for show a list of information in a tooltip. Saving the element as a string is not a clean solution.
Also, title is only for button? We need to use it any element, like a div.

Thanks

[Sharon Sanchez Selvaraj]

Hi Cesar, 

 

Thanks for the details.  

 

We would like to mention that, since the Tooltip was rendered using TypeScript, the required ngTemplate values are to be parsed in the format as given below.  

 

Refer to the below links on how the Tooltip is rendered with Template in TypeScript. 

 

https://ej2.syncfusion.com/documentation/tooltip/content/ 

 

However, if you would like to create the Tooltip with an external component in Angular way of rendering, you can use selectors as given below. 

 

Refer to the sample: 

 

https://stackblitz.com/edit/angular-parent-child-interaction-fhyhlk?file=app/app.component.html 

 

Refer to the below documentation link: 

 

https://ej2.syncfusion.com/angular/documentation/tooltip/content/ 

 

Please let us know if you face any difficulties in rendering Tooltip with the above way.  

 

Regards, 

Sharon Sanchez S. 

[Rahul Ravi]

Hi

I'm using ejs tooltip as a directive and able to bring tooltip on hover. The problem is for buttons the tooltip directive is functioning properly and getting displayed all the time, but when I use the same tooltip directive for div or span it is not displaying the tooltip on the first hovering of the element. 

Upon debugging, I found that the dynamic data-id is not getting rendered on the hovered div element whereas, on second, third hover it is been set properly.

Am I missing out something? Any help would be greatly appreciated.

Thanks in advance!

My directive code snippet:

[Subalakshmi Ramachandran]

Hi Rahul,

Thank you for reaching out with your issue.

Based on the information you've provided; it appears that the issue might be related to the availability of the id you're trying to append the Tooltip. Typically, Tooltips are appended to an element with a specific id in HTML.

Could you possibly share the code that renders the div or span element? This would help us understand the situation better.

In the meantime, we recommend appending the Tooltip to the body and setting the target property with its class name or id of the element on which you want to display the Tooltip.

For your reference, you may find the following documentation helpful: https://ej2.syncfusion.com/documentation/tooltip/getting-started#initialize-tooltip-within-a-container

We look forward to your response and are eager to assist you further.


Regards,
Suba R

[Rahul Ravi]

Hi Suba,

I've created a stackbiltz link stating my exact issue. As I mentioned in my previous post, the tooltip is implemented as a directive and used in a component.

In the stackbiltz example, you can observe that the first hover doesn't display the tooltip and also triggering a shrinkage of the html content. On second hover, you can notice that the tooltip is getting displayed.

This is the problem I'm facing in my application.

Note: First hover should be on the element precisely and when you move your cursor away from the element and bring it back, it shows the tooltip

Stackbiltz link: Angular Ebe Tooltips (forked) - StackBlitz

Let me know if anything needed from my end

Thanks,

Rahul

[Jafar Ali Shahulhameed]

Hi Rahul,

The reported issue occurs at your end due to missing target element at the DOM. However, you can meet your requirement by making use of the Tooltip target property. Refer the code changes below,

[tooltip-directive.ts]

 

  if (!this.tooltip && this.innerHtml && this.isTooltipShow) {

    this.tooltip = new Tooltip({

     …

      target: '.custom-button'

    })

    …

   this.tooltip?.appendTo('body');

[app.component.html]

 

<button class="custom-button">test</button>

We have attached the sample for your reference,

Sample: https://stackblitz.com/edit/angular-ebe-tooltips-z4zbga?file=src%2Fapp%2Ftooltip-directive.ts%3AL38,src%2Fapp%2Fapp.component.html,src%2Findex.html

Kindly try out the shared details and get back to us if you need further assistance.

Regards,

Jafar