Is it possible to change CSS so that label's arrow lines up with the bottom of the input field?

[mwnorman]

I fork'd the project to allow a user to specify a custom CSS class:

$.validity.setup({
     tooltipCustomClass: 'my-tooltip-class'
});

So far I have been able to change the background color:

.my-tooltip-class {
    background-color: red !important;
}

.my-tooltip-class .validity-tooltip-outer, .my-tooltip-class .validity-tooltip-inner {
    border-right-color: red !important;
}

.my-tooltip-class .validity-tooltip-outer {
    border-right-color: red !important;
}

.my-tooltip-class .validity-tooltip-inner {
    border-right-color: red !important;
}

but I haven't figured out how to re-align the arrow to not be in the middle of the input field but instead line-up with the field's bottom.

Any insight would be greatly appreciated,

Mike Norman

[markvantilburg]

What is the order of your css includes in your file? If you want to use your own css just don't use the included file and add the needed classes to your own css.