Quantcast

setting max-width of dijit.ToolTip

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

setting max-width of dijit.ToolTip

Robert Peterson
I tried the following, but it didn't seem to work.

var helpIcon = dojo.create("span", {"class":"help-icon", innerHTML:"[?]"}, td1);
var tooltip = new dijit.Tooltip({
        connectId: [helpIcon],
        label: "large paragraph of text here ... "
    });
tooltip._setStyleAttr("max-width: 100em");

So far we are using dojo core, but only this from dijit. We like the tundra css for the tooltip, but it seems wasteful to import all of it when we are only using tooltips. I tried only including css classes with tooltip in the class names, but didn't have any luck. I don't feel comfortable manually extracting bits and pieces of the tundra them to begin with. Any advice on taking a more minimal approach?

Thanks,
Robert

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: setting max-width of dijit.ToolTip

Robert Peterson
From the comments in tundra.css I learned that dijit.css and Dialog.css are the minimal set needed for tooltips. I still haven't found a way to limit the width of tooltips though - they expand across the entire screen :|

On Mon, Dec 28, 2009 at 9:31 AM, Robert Peterson <[hidden email]> wrote:
I tried the following, but it didn't seem to work.

var helpIcon = dojo.create("span", {"class":"help-icon", innerHTML:"[?]"}, td1);
var tooltip = new dijit.Tooltip({
        connectId: [helpIcon],
        label: "large paragraph of text here ... "
    });
tooltip._setStyleAttr("max-width: 100em");

So far we are using dojo core, but only this from dijit. We like the tundra css for the tooltip, but it seems wasteful to import all of it when we are only using tooltips. I tried only including css classes with tooltip in the class names, but didn't have any luck. I don't feel comfortable manually extracting bits and pieces of the tundra them to begin with. Any advice on taking a more minimal approach?

Thanks,
Robert


_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: setting max-width of dijit.ToolTip

Robert Peterson
I got it working by edited dijit.css directly as follows, I suppose this is the only solution?

.dijitTooltip {
   max-width: 50em;
   position: absolute;
    z-index: 2000;
    display: block;
    /* make visible but off screen */
    left: 50%;
    top: -10000px;
    overflow: visible;
}

On Mon, Dec 28, 2009 at 6:13 PM, Robert Peterson <[hidden email]> wrote:
From the comments in tundra.css I learned that dijit.css and Dialog.css are the minimal set needed for tooltips. I still haven't found a way to limit the width of tooltips though - they expand across the entire screen :|


On Mon, Dec 28, 2009 at 9:31 AM, Robert Peterson <[hidden email]> wrote:
I tried the following, but it didn't seem to work.

var helpIcon = dojo.create("span", {"class":"help-icon", innerHTML:"[?]"}, td1);
var tooltip = new dijit.Tooltip({
        connectId: [helpIcon],
        label: "large paragraph of text here ... "
    });
tooltip._setStyleAttr("max-width: 100em");

So far we are using dojo core, but only this from dijit. We like the tundra css for the tooltip, but it seems wasteful to import all of it when we are only using tooltips. I tried only including css classes with tooltip in the class names, but didn't have any luck. I don't feel comfortable manually extracting bits and pieces of the tundra them to begin with. Any advice on taking a more minimal approach?

Thanks,
Robert



_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: setting max-width of dijit.ToolTip

Bill Keese
That's a good solution.   Of course it's better to stick that CSS rule into your own CSS file instead of mucking with dijit.css directly.

Robert Peterson wrote:
I got it working by edited dijit.css directly as follows, I suppose this is the only solution?

.dijitTooltip {
   max-width: 50em;
   position: absolute;
    z-index: 2000;
    display: block;
    /* make visible but off screen */
    left: 50%;
    top: -10000px;
    overflow: visible;
}

On Mon, Dec 28, 2009 at 6:13 PM, Robert Peterson <[hidden email]> wrote:
From the comments in tundra.css I learned that dijit.css and Dialog.css are the minimal set needed for tooltips. I still haven't found a way to limit the width of tooltips though - they expand across the entire screen :|


On Mon, Dec 28, 2009 at 9:31 AM, Robert Peterson <[hidden email]> wrote:
I tried the following, but it didn't seem to work.

var helpIcon = dojo.create("span", {"class":"help-icon", innerHTML:"[?]"}, td1);
var tooltip = new dijit.Tooltip({
        connectId: [helpIcon],
        label: "large paragraph of text here ... "
    });
tooltip._setStyleAttr("max-width: 100em");

So far we are using dojo core, but only this from dijit. We like the tundra css for the tooltip, but it seems wasteful to import all of it when we are only using tooltips. I tried only including css classes with tooltip in the class names, but didn't have any luck. I don't feel comfortable manually extracting bits and pieces of the tundra them to begin with. Any advice on taking a more minimal approach?

Thanks,
Robert



_______________________________________________ FAQ: http://dojotoolkit.org/support/faq Book: http://docs.dojocampus.org [hidden email] http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...