SmartMenus DHTML Menu / JavaScript Menu - Forums

meglio · 2012-Jul-02 02:34:45

Code:

.poshytip({
                className: 'tip-nz-300',    content: '[title]',    showOn: 'focus', fade: false, slide: false,
                alignTo: 'target', alignX: 'right', alignY: 'inner-top', offsetX: 5, offsetY: 0
            })

smartmenus · 2012-Jul-06 06:03:01

You can control the position of the arrow in the CSS - e.g. for the "tip-yellow" class you need to edit this rule for the left arrow:

Code:

.tip-yellow .tip-arrow-left {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-6px;
    top:50%;
    left:0;
    width:10px;
    height:20px;
    background:url(tip-yellow_arrows.png) no-repeat -48px 0;
}

There are 3 more rules for the top, right and bottom arrows - .tip-arrow-top, .tip-arrow-right and .tip-arrow-bottom. The script detects automatically on which side of the tip the arrow should appear but the actual alignment of the arrow is controlled via these rules in the CSS.

meglio · 2012-Jul-06 06:12:47

How can I prepare css rule if I do not know what is the height of input used with tooltip - it will vary all the time. The idea here is that in must be placed with JS automatically in half of input, not in half of tooltip - eg it will point to input itself.

Regards,
Anton

smartmenus · 2012-Jul-10 06:57:53

Well, this isn't possible by default so you would need to use some custom function if you'd like to achieve it. For example, something like this:

Code:

$(input).focus(function() {
    var $input = $(this);
    $input.data('poshytip').$arrow.css('top', $input.height() / 2);
});

Of course, you may need to tweak it..

SmartMenus DHTML Menu / JavaScript Menu - Forums

#1 2012-Jul-02 02:34:45

Arrow alignment problem

Code:

#2 2012-Jul-06 06:03:01

Re: Arrow alignment problem

Code:

#3 2012-Jul-06 06:12:47

Re: Arrow alignment problem

#4 2012-Jul-10 06:57:53

Re: Arrow alignment problem

Code:

Board footer