Tooltip tail positioning with css/js/jquery

Question

My problem is that I can't really position a tooltip tail properly. I have a plugin that generates hints, which can be positioned in 4 different places: top, bottom, left, right. I need the tail to be positioned in the center top/left/bottom/right of each hint.

I tried using css like that:

.ui-hint{
    display: block;
    position: absolute;
    min-width: 50px;
    max-width: 200px;
    min-height: 25px;
    background: #FDD10B;
    padding: 15px;
    color: #000000;
    font-size: 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.ui-hint-left:before{
    position: absolute;
    z-index: 9998;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FDD10B;
    border-bottom: 15px solid transparent;
    right: -15px;
    top: 25%;
}

.ui-hint-right:before{
    position: absolute;
    z-index: 9998;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 20px solid #FDD10B;
    border-bottom: 15px solid transparent;
    left: -15px;
    top: 25%;
 }

.ui-hint-top:before{
    z-index: 9998;
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #FDD10B;
    left: 42%;
    bottom: -15px;
}

.ui-hint-bottom:before{
    z-index: 9998;
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #FDD10B;
    left: 42%;
    top: -15px;
}

I works fine for standart height/width hints, but if they get larger, tooltips shift because of the messed up percentage rate. Maybe I can somehow make that using js/jquery (appending an element)? Will appreciate any input.

puppybits · Accepted Answer · 2013-10-25 05:11:02Z

1

The simplest way would be with the new flex box but that doesn't have broad support yet. If you have to support IE then it's not an option.

javascript would be the next step up. You can set the element to visibility: hidden it will layout and you can calculate the right height/width. Set the position with JS.

The old-school options would be a CSS hack. You can have a wrap element (or a :before { content:''}), set the width to 100% then left: 50%. The inner element that contains the tool tip set left: -50% to move it back to the center then offset the margin or padding to half the width of the tool tip icon. Here's an example: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support. It's not pretty but none of the old CSS hack are.

answered Oct 25, 2013 at 5:11

puppybits

1,11012 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nainy Over a year ago

The almighty gods blessed me with the ability to ditch IE. Can you provide some sort of example of how I can implement the flexbox? Never worked with it.

Collectives™ on Stack Overflow

Tooltip tail positioning with css/js/jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related