Whats the best way to implement a tooltip? If a user types a SQL function for example LOWER(
then I want to show a tooltip with the parameter(s), datatypes and a short description for example.
Does CodeMirror already has this functionality?
I probably should use Widget I guess.
To show a Widget you can use:
// create a node
var htmlNode =document.createElement("h1");
var text = document.createTextNode("Text or whatever");
htmlNode.appendChild(text)
// call this after you initialized the editor.
// the position must be like this {ch: YourCharecterNumber, line: YourLineNumber}
editor.addWidget({ch:1 , line: 1},htmlNode, true)
I can catch the ( key and check if the word before the ( is listed in the available SQL functions and then create the widget by doing some lookup in a SQL reference/documentation datastructure.
I should then look for a ) keypress and then remove the Widget.
If the SQL function has multiple parameters I should also check for a , and then make the current parameter bold.
The recommended way, used for example in the Tern plugin, is to just use charCoords to position your own node over the editor.
Ok thanks. Found the Tern demo at CodeMirror: Tern Demo
Managed to show a Widget just below the cursor when an SQL function is opened with ( and I can close the widget when ) is pressed.
But I also want a short description of the SQL function when scrolling through the SQL function list.
How do I position the tooltip just right from the sql show hint dropdown:
Also the Tern demo inspired me to use a small icon indicating when it’s a table, column, sql function or keyword. Could you give me a hint where/how I could implement this?
Well, again, look at the tern addon. It implements both these features. The icons are pure CSS (which is a bit of a pain, but possible). The extra info for a selected hint is done by attaching a "select" handler to the completion object. See the docs for show-hint.