Certainly seems like it should be easy... I guess that's why I was kinda
surprised to not see where anyone else had put one together... certainly
was nothing on scripteka... could add some serious value to some sites.
I'll play around with it on Sunday and see what I can cobble together... of
course it looks like you did most of the work in 5 minutes and I'll spend
most of the day playing around with it! LOL
I'll post what I come up with...
On Thu, May 30, 2013 at 11:41 AM, Walter Lee Davis <wa...@wdstudio.com>wrote:
> This would be pretty easy to do. Prototype gives you lots of tools to make
> this possible, the bulk of this effort would probably go into the CSS to
> style your tooltips.
>
> On May 30, 2013, at 11:30 AM, Phil Petree wrote:
>
> > Has anyone developed an inline help system? Am I barking up the wrong
> tree or is there an easier way to do this?
> >
> > Ideally we could just drop the div in anywhere we wanted, the help icon
> would always float to the right of the label/input and when the user
> clicked the help icon we'd get a context sensitive help solution.
> >
> > I was thinking of something that could be built off a div like this:
> >
> > prototype:
> > document.observe("dom:loaded", function() {
> > $$('div.help').each(function(item) {
> > item.observe('onclick', function() {
>
> This would be item.observe('click' ... you never use the 'on' part in
> Element/Event.observe.
>
> > // get items id
>
> item.id or item.readAttribute('id')
>
> > // use ajax call to get help info from server
> > // populate div
> > // apply pop-up class
>
> new Ajax.Updater('theDivId', '/url/to/help/system', {
> parameters: {id: theIdYouGotAbove},
> onSuccess: function(){
> item.addClassName('tooltip');
> }
> });
>
> > // set handler to process dismiss click () {
> > // delete context help
> > // restore help class
> > };
>
> document.on('click', 'div.tooltip', function(evt, elm){
> elm.update().removeClassName('tooltip');
> });
>
>
> The "on" handler is really helpful, it can manage elements that weren't in
> place when the page loaded. One handler to rule them all, not a separate
> handler per tooltip.
>
> > });
> > });
> > });
> >
> > html:
> > <div class='help' id='topic'></div>
> >
> > css:
> > .help {?}
> > .popup-help {?}
> > .icon-help {background: #fff url(images/icons/help_32x32.png) top left
> no-repeat;}
>
> Hope this helps,
>
> Walter
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to prototype-scriptaculous+unsubscr...@googlegroups.com.
> To post to this group, send email to
> prototype-scriptaculous@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to prototype-scriptaculous+unsubscr...@googlegroups.com.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
Visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
