Tooltip Manager Not Show


#1

Hi, how are you all? I’m very new with atom and development packages, and i have a problem with the atom.tooltips.add

I read the documentation: Tooltip Manager and follow step by step but, the tooltip not show :frowning: it seems very simple, i don’t know what i miss.

This is a example of how i use it:

div1 = document.createElement('div'); disposable = atom.tooltips.add(div1, {title: 'This is a tooltip', trigger: 'click', 'html': false}); disposable.dispose();

Is very simple. Thanks and great work!


#2

I think you need to provide more information. Can you share this code in a GitHub repo so that others can take a look at your whole project?


#3

If you look at the documentation for the TooltipManager.add function, you’ll notice that the first argument is an HTMLElement to display the tooltip in reference to. Since just executing document.createElement doesn’t actually add the div to the DOM, the tooltip doesn’t display.

You’ll have to pick some element actually in the DOM and get a reference to it in order to see a tooltip display.


#4

Hi leedohm, i follow your indications and stil nothing, here is my block o code in where apply the tooltip:

//TODO: Still learning and coding.
function test() {
  this.editorWatch = atom.workspace.observeActivePaneItem (function (editor) {  
      var editorView = atom_space_pen_views_1.$(atom.views.getView(editor));
      var subscriber = new Subscriber();
      var scroll = getFromShadowDom(editorView, '.scroll-view');
      subscriber.subscribe(scroll, 'click', function (e) {
        console.log('flame on');
        **disposable = atom.tooltips.add(this, {title: 'This is a tooltip'});**
        disposable.dispose();
      });
      atom.commands.add('atom-text-editor', 'editor:will-be-removed', function (e) {
          subscriber.unsubscribe();
      });
  });
}

I inspect the object this with the debugger and is a div element: div.scroll-view but nothing happens.

Thanks :thumbsup:


#5

You should probably take a look at some packages that use tooltips to see how they work. If you look at the status-bar package, you’ll see that adding the tooltip doesn’t actually make it visible … until you hover over the element in question:


#6

You are right @leedohm, now i understand the flow of the tooltip! :thumbsup:

Still, is there a way to link the event click with the hover of the tooltip? i mean, that the tooltip appers on the click event?

Cheers! :beers:


#7

Not built-in to the API, no.


#8

I finally did it! Combine the event on click with the option trigger in the tooltip set to manual:

Here is the code:

https://github.com/arianbessonart/pg-dev/blob/functions-overlays/lib/go-to-provider.js#L52

Thanks for your help!