问题与IE中工具提示的混乱有关

Question

我已经实现了qTip jquery插件，它在chrome和FF上运行完美，但在IE 8/9/10/11中它不能正常工作：
1）如果文本太长，不会包装单词，但会将工具提示扩展出浏览器 2）右上角没有显示箭头 这是我的代码：

.ui-tooltip-light{border:1px solid #666; background: #fff; margin-top:10px;font: 14px/1.4 arial,sans-serif;border: 1px solid #666;
padding: 15px 15px 15px 15px;
text-align: left;
word-wrap: break-word;
padding-bottom: 1em;}
.ui-tooltip-light:before, .ui-tooltip-light:after{
    content: "";
    position:absolute;
    width: 0;
    height: 0;    
}
.ui-tooltip-light:before {
    top: -10px;
    right: -1px;
    border-bottom: 10px solid #666;
    border-left: 10px solid transparent;
}

.ui-tooltip-light:after {
    top: -8px;
    right: 0px;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;    
}
.qtip-content a{color: #666;text-decoration: underline;}
.qtip-content a:hover{color:#a90000;}
.ttip{cursor:pointer;}

JS

$(document).ready(function () {    
        $('.ttip').qtip({
            content: "my test",
            show: 'click',
            hide: 'click',
            position: {
                my: 'top right',
                at: 'bottom center'
            },
            style: { classes: 'ui-tooltip-light' }
        });
    });

它的外观如下：