how to add custom and dynamic hover tooltip on each text?

[ysk3a]

Hello,
is there any way to get ace to show information about a variable/method on hover?
just like vscode when you hover, it shows a tooltip giving information about the method or variable.
or something that looks like https://github.com/angelozerr/tern.ace#text-hover which I came across while searching how to add the 'hover to show info' functionality.
or https://mkslanc.github.io/ace-playground/#typescript-language-service where if you hover over the words, there is a tooltip giving information about that word.

I am not using any language service since I am mostly using ace editor for the live syntax highlighting as you type, custom autocomplete (based on the key words saved by the user and retrieved from backend) and formatting. I am only using java-like or go-lang setMode() for their syntax highlighting style.

I am trying to get this hover tooltip to work in my angular 15 app. I am not using any third party wrappers and I followed this https://stackblitz.com/github/shhdharmen/ace-angular but removed any http request and adding themes and extension in the angular.json file for all offline use.

another thing I thought I should mention is that all the autocomplete keywords, variables, methods and information of those methods/variables are user made and saved in the backend and I plan to make it load per ace editor sessions that are present on the page.

I thought I try asking the community here for help since I couldn't find any examples online and the closest, or what seemed the closest, was adddynamicmarker and hovertooltip class which I could not figure out how to use with dynamic information tooltip and I couldn't find any working demo I can see how it behaves beside the source code.

[whazor]

I recommend using the HoverTooltip, as in the kitchen-sink demo. Note that the kitchen sink demo uses diagnostic markers to receive relevant information, but with docPos you can receive any information you want. The domNode that goes into showForRange is a DOM element document.createElement and you can dynamically change that one, also add interactive element and style it however you want.

For Angular you can look into dynamic component.

For the docTooltip.setDataProvider it is important that you return whenever there is no data otherwise you would have empty tooltip all the time.

[whazor]

I modified the ace-angular to have working hover tooltips: https://stackblitz.com/edit/github-xkdvn3?file=src%2Fapp%2Fapp.component.ts

[ysk3a]

Cool. Thank you.
Although your first paragraph on explaining the domNode and diagnostic markers was difficult for me to understand since I am a visual learner :P your demo in the stackblitz provided me an idea/starting point to work on
and i'll try to change it around to make it more 'angular-y' with dynamic components or using third party ui libraries.
Thanks! 👍 👍
I set Mark as answer for the above comment for now. 👍

I hope it isn't too much to ask but would you happen to know if there is a stackblitz/codesandbox version of the kitchen-sink demo? I'd like to explore around what and who is called as the user uses ace editor sessions.

edit:
just in case someone wants to see a potential approach on using dynamic component in angular, I have made
https://github.com/ysk3a/angular-ace-dynamichovertooltip-sample
which you can open in stackblitz.
I'm not sure if this is the best way but I am sure there can be a lot that can be improved on and perhaps implemented in a more cleaner and performant way.
maybe put outside of ngzone or improve on change detection or clean up the code, etc.
So if anyone is familiar with performance in angular or good angular coding, I would appreciate it you could share and help improve the code 👍 🚀
and be sure to share your approaches for others to learn. 😃
Also, it may help others that may want to use ace in angular since, for me, after searching online for weeks, I couldn't find any useful samples or working demo that I can inspect or understand or make it work on my end as a beginner/intermediate developer 😛
Except for the stackblitz built from github/shhdharmen/ace-angular
and now whazor's stackblitz link above. (thanks to both! 🎉 )