Error with Dynamic dijit.Tooltip

Just when I think I'm getting my head around dojo...

I searched the Dojo forums on Dynamic Tooltips and found this:

http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/dynamic-dijit...

Based on that, here's the code I'm using:

///---
var ttNode = dojo.doc.createElement('span');
ttNode.innerHTML = 'Remove this Info Item';

var tooltip = new dijit.Tooltip( { connectId: 'btnRemoveInfo' }, ttNode );
tooltip.startup();

td.appendChild(tooltip.domNode);
///---

There are no errors during rendering, but when I hover over the
element that should trigger the tooltip, Firebug shows this error:

aroundNode has no properties
http://localhost:8010/JavaScript/dojo-release-0.9.0/dojo/dojo.js.uncompr...
Line 352

When I look at the source, that's in the middle of "dojo._loadUri".
That doesn't seem to have anything to do with what I'm working with so
I'm not sure I can trust the line number returned in Firebug.

I'm a bit stuck with this one, any ideas?

-- Matthew

Comments

well, the td.appendChild(tooltip.domNode) is being "ripped" out of wherever it
happened to be in the dom, and injected into a table cell it looks like.

you probably are meaning to put the ttNode in the table cell before calling
new dijit.Tooltip ... something like:

--
// create and insert our 'natural' dom element where we want it
var tt = dojo.doc.createElement('span');
tt.innerHTML = "remove me";
td.appendChild(tt);
// make a new tooltip using the span we made as the srcNodeRef
var tooltip = new dijit.Tooltip({ connectId: 'btnRemoveInfo' },tt);
tooltip.startup();
--

the error about "aroundNode" sounds like the tooltip is looking for a parent
node of some type so it knows where to position?

in any event, appendChild()'ing anyWidget.domNode is questionable, and should
be used with caution. ymmv.

Regards,
Peter Higgins

Thank you for your help, but I think I'm more confused now. I thought
appendChild was how I was supposed to add dynamically generated
elements and widgets to the page? All of the examples I could find
used widget.domNode to perform insertion. Should I be doing this
differently?

I tried revising my code to create the element, add it to the cell,
then creating the tooltip widget, but now I get that "arroundNode"
error spamming out of control in the debug window when the mouse
hovers over any of the page. Here's the code now:

var ttNode = dojo.doc.createElement('span');
ttNode.innerHTML = 'Remove this Info Item';
td.appendChild(ttNode);

var tooltip = new dijit.Tooltip( { connectId: 'btnRemoveInfo'
}, ttNode );
tooltip.startup();

Maybe I should just ask, how would you create a dynamic tooltip for a
dynamically created button or anchor tag?

Your help on this is most appreciated, thank you,

-- Matthew

On Nov 8, 2007 6:21 PM, peter e higgins wrote:

Here is how I do it:
var span = dojo.doc.createElement("span");
widget.tooltip = new dijit.Tooltip(
{
connectId: widget.nodeToHoverOverToGetTooltip,
label: "Interesting stuff about this widget"
}, span);

nodeToHoverOverToGetTooltip depends on the widget, or other element,
that drives the tooltip. Could be a labelNode, containerNode, etc. You
don't really need to do the assignment to widget.tooltip either, I think.

I use appendChild(widget.domNode) quite a bit, but when it is available
and necessary, parentWidget.addChild(childWidget) buys you some
functionality, and especially for widgets that were designed to fit into
a hierarchy - layout comes to mind.

Matthew Shirey wrote:

Whoops.
The connectId parameter now looks for an array. so:
var span = dojo.doc.createElement("span");
new dijit.Tooltip(
{
connectId: [widget.nodeToHoverOverToGetTooltip],
label: "Interesting stuff about this widget"
}, span);

Marty La Jeunesse wrote:

uhm... what? When I look at the Tooltip.js source in there I see this
for connectId:

// connectId: String
// Id of domNode to attach the tooltip to.
// (When user hovers over specified dom node, the tooltip will appear.)
connectId: "",

And I still do not understand how to add the Tooltip to the page
correctly. I understand how to dynamically create the Tooltip widget,
but I seem to be having trouble adding it to the page correctly so
that it will work right connected to a dynamic button I've created.

-- Matthew

On Nov 9, 2007 3:46 PM, Marty La Jeunesse wrote:

Someone on IRC (tk) got me pointed in the right direction.

I had more going on dynamically that I wasn't paying attention to.
The dynamic button was being placed in a cell of a dynamic table. The
table was not added to the page dom at the time the tooltip was
created. All I had to do was make sure it was in the dom before
making the tooltip and all was good. :)

-- Matthew

On Nov 9, 2007 4:07 PM, Matthew Shirey wrote:

At revision 10942, connectId turned into an array in Tooltip.js

Matthew Shirey wrote:

Back to top