CODEWITHSUNDEEP
javascriptjquerycss
nainy
nainy

Reputation: 540

Tooltip tail positioning with css/js/jquery

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.

Upvotes: 0

Views: 522

Answers (1)

puppybits
puppybits

Reputation: 1110

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.

Upvotes: 1

Related Questions