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 [email protected].
To post to this group, send email to [email protected].
Visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
