How to transform a DOM element into a tooltip?

Question

I want to transform an already existing div element in a tooltip that stays open until dismissed. I tried to use JQuery official tooltip plugin. I found a way to not close it on mouseleave, but it requires a content string, I can't pass a DOM element.

Even if there's a trick to pass HTML content, I need the original DOM element, since events are binded to it.

qTip2 seems to be able to do it, but elements must be adjacent and they can't.

For now I've done it by hand, but I'm not sure I'm covering all the subtle possibilities of a bad positioning. And furthermore it looks ugly.

What events could make sense when bound to a tooltip element? I mean, you can't click or hover it, so what's the point? — Tomáš Zato, Nov 18 '15 at 10:58
About the close requests: It's on-topic to ask a question about a specific tool. It's off-topic to ask a question for recommendations. — Reeno, Nov 18 '15 at 11:01
@TomášZato: I want a tooltip that opens only on click and stay opened. I found a way to do it with the jQuery plugin, but the above problem remains. — Marco Sulla, Nov 18 '15 at 11:11
@Reeno: not asking recommendetions. I'm not asking "What's the best tool for...", but I'm asking for a tool for a very specific problem. If this question is off-topic, every question that are like "Is there a way in language X to do Y" is off-topic. — Marco Sulla, Nov 18 '15 at 11:13
@Reeno: ok, I think you're referring to the point #4 of the guidelines. I edited the title. — Marco Sulla, Nov 18 '15 at 11:20
Something that opens on click and stays opened is not a tooltip. So I guess you are still on your way to figure out what is it youa ctually want. — Tomáš Zato, Nov 18 '15 at 11:23
@TomášZato: see for example http://qtip2.com/demos#section-events , first field — Marco Sulla, Nov 18 '15 at 11:31
That's not on click though, you're little bit confusing, but now I understand what you want. — Tomáš Zato, Nov 18 '15 at 11:36

score 0 · Accepted Answer · answered Nov 18 '15 at 11:57

Ok I figured out you can, sort of, do this in jQuery UI using open and close events. Basically what you do is connect your element to existing UI. I figured this out by reading the docs, you could do this as well.

$("#tooltip").tooltip({
    content: function() {
        // Return nothing here, because only strings are accepted
        return " ";
    },
    open: function( event, ui ) {
        var element = ... create or get element here ...;
        ui.tooltip[0].appendChild(element);
    },
    close: function( event, ui ) {
        // Destroy the element? 
    }
});

I created a jsFiddle where <input gets teleported from <body> to tooltip:

https://jsfiddle.net/kujo54cq/1/

How to transform a DOM element into a tooltip?

1 Answers1