This project is archived and is in readonly mode.

#570 ✓invalid
Muhamann

className - Bug in Tips.js

Reported by Muhamann | May 17th, 2011 @ 03:43 PM | in 1.4.0.1 (closed)

Changing the className-options in Tip-Class has no effect due to hard-coded classNames inside the Tip-Class-Code:

Original...

    toElement: function(){
        if (this.tip) return this.tip;

        this.tip = new Element('div', {
            'class': this.options.className,
            styles: {
                position: 'absolute',
                top: 0,
                left: 0
            }
        }).adopt(
            new Element('div', {'class': 'tip-top'}),
            this.container,
            new Element('div', {'class': 'tip-bottom'})
        );

... must be changed to ...

    toElement: function(){
        if (this.tip) return this.tip;

        this.tip = new Element('div', {
            'class': this.options.className,
            styles: {
                position: 'absolute',
                top: 0,
                left: 0
            }
        }).adopt(
            new Element('div', {'class': this.options.className+'-top'}),
            this.container,
            new Element('div', {'class': this.options.className+'-bottom'})
        );

... cause of hard-coded classNames 'tip-top' and tip-bottom. Same in the next original Code...

elementEnter: function(event, element){
        clearTimeout(this.timer);
        this.timer = (function(){
            this.container.empty();

            ['title', 'text'].each(function(value){
                var content = element.retrieve('tip:' + value);
                var div = this['_' + value + 'Element'] = new Element('div', {
                        'class': 'tip-' + value
                    }).inject(this.container);

... hard-coded 'tip-' for starting the className with has no sense and makes the options className needless... replace Code:

elementEnter: function(event, element){
        clearTimeout(this.timer);
        this.timer = (function(){
            this.container.empty();

            ['title', 'text'].each(function(value){
                var content = element.retrieve('tip:' + value);
                var div = this['_' + value + 'Element'] = new Element('div', {
                        'class': this.options.className + '-' + value
                    }).inject(this.container);

Then the className-parameter in the options can be NEWCLASSNAME , so that the following css-classes take full effect:

.shopadmin-top { ... .shopadmin-title { ... .shopadmin-text { ...

Otherwise the options-parameter className has no effect.

Regards

Comments and changes to this ticket

  • Arian

    Arian May 17th, 2011 @ 07:25 PM

    • State changed from “new” to “open”
    • Milestone set to 1.4.0.1
    • Assigned user set to “Christoph Pojer”
    • Milestone order changed from “197599” to “0”
  • David Walsh

    David Walsh June 3rd, 2011 @ 01:14 AM

    This isn't a bug. The class should be styled as follows:

    .yourCustomClass .tip-top    {  }
    .yourCustomClass .tip-bottom    {  }
    

    The className is not a prefix -- it's a base for styling.

    Christoph -- please confirm and close.

  • Muhamann

    Muhamann June 5th, 2011 @ 05:21 PM

    You're right, maybe this should be explained in documentation just like you did it in your post.
    Thx

  • David Walsh

    David Walsh June 5th, 2011 @ 07:17 PM

    • State changed from “open” to “invalid”
    • Assigned user changed from “Christoph Pojer” to “David Walsh”

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

People watching this ticket

Pages