Everything centered about hint.css HOT 13 CLOSED

I have the same problem. Screenshot for reference.

from hint.css.

@renatomartins if you issue is same @Vikom, you could do this:

To the :before elements of hint--top & hint--bottom give a negative margin of 6px.

.hint--top:before, .hit--bottom:before {
 margin-left: -6px;
}

This will center the arrows on the element width. Though tooltips won't be centered as thats lil tricky and is still a question.

from hint.css.

Without using an additional element instead of ::before, ::after, there is only one decent way of doing this: http://codepen.io/thejameskyle/pen/fzjwy

Even there it breaks in several different places.

I think the best way to handle this would to be to use javascript to modify the existing tooltips, putting them into an additional element. Leaving the current css as is by default.

from hint.css.

I believe this should do it:

.hint--top:after{
  transform: translateX(-50%);
}

(add necessary browser prefixes)

from hint.css.

I took @robertimes example a little further, this works pretty well for me:

// center hints

.#{$prefix}top, .#{$prefix}bottom {
    &, &:hover, &:focus {
        &:after, &:before {
            transform: translate(-50%, 8px);
            margin-left: 0;
        }
    }
}

from hint.css.

@stevelacey solution works like a charm. +1 !

from hint.css.

@ahfeel I just noticed that my left/right tooltips do a little slide out transition whilst my top/bottom ones don't, presumably because of my fix... it doesn't bother me, I'd rather have them centred, but an inconsistency worth noting.

from hint.css.

@stevelacey 👍

from hint.css.

Working on this as part of #94

from hint.css.

This is now default behavior of the library from v2.0 :)

from hint.css.

@chinchang now* ?

from hint.css.

@stevelacey fixed the typo. Thanks...that was a dangerous one :P

from hint.css.

😄👌

from hint.css.