Question

qTip在IE中没有箭头，但箭头显示在FF中。在jquery从1.3更新到1.7.2后，箭头消失了

$element.qtip({
                content: {
                    text: text,
                    prerender: true,
                    title: {
                        text: this.settings.translationDictionary.lblWarningText,
                        button: "<div class='confWarningClose'>" + this.settings.translationDictionary.tblCloseWarningText + "</div>"
                    }
                },
                position: {
                    corner: {
                        target: "bottomMiddle",
                        tooltip: "topMiddle"
                    }
                },
                style: {
                    tip: { corner: "topMiddle", size: { x: 20, y: 10} },
                    width: 220,
                    "word-wrap": "break-word",
                    "font-size": "13px",
                    color: "Red",
                    "text-align": "center",
                    title: {
                        "padding-right": "5px",
                        "padding-top": "3px",
                        "padding-left": "60px",
                        "color": "#F4D546",
                        background: "#424242",
                        height: "8px"
                    },
                    border: {
                        width: 3,
                        radius: 5,
                        color: '#424242'
                    }
                },
                show: {
                    solo: true,
                    delay: 0,
                    when: {
                        target: false,
                        event: "click"
                    }
                },
                hide: ""
            })

图片示例在这里 http://content.screencast.com/users/blackvoodoo/folders/Jing/media/30fabe28-1fc5-475e-a042-3bb551ee0968/arrow.png

Answer 1

好的，我已经解决了这个问题。需要更新功能createTip（角落）。我们不能通过函数prepend（）添加VML元素。相反，我们通过html（）将VML元素添加到self.elements.tip。更新了下面的函数createTip（角落）：

    function createTip(corner) {
    var self, color, coordinates, coordsize, path;
    self = this;

    // Destroy previous tip, if there is one
    if (self.elements.tip !== null) self.elements.tip.remove();

    // Setup color and corner values
    color = self.options.style.tip.color || self.options.style.border.color;
    if (self.options.style.tip.corner === false) return;
    else if (!corner) corner = self.options.style.tip.corner;

    // Calculate tip coordinates
    coordinates = calculateTip(corner, self.options.style.tip.size.width, self.options.style.tip.size.height);

    // Create tip element
    self.elements.tip = $('<div class="' + self.options.style.classes.tip + '" dir="ltr" rel="' + corner + '" style="position:absolute; ' +
     'height:' + self.options.style.tip.size.height + 'px; width:' + self.options.style.tip.size.width + 'px; ' +
     'margin:0 auto; line-height:0.1px; font-size:1px;"></div>');
    var tipobject = '';
    // Use canvas element if supported
    if ($('<canvas>').get(0).getContext)
        tipobject += '<canvas height="' + self.options.style.tip.size.height + '" width="' + self.options.style.tip.size.width + '"></canvas>';

    // Canvas not supported - Use VML (IE)
    else if ($.browser.msie) {
        // Create coordize and tip path using tip coordinates
        coordsize = self.options.style.tip.size.width + ',' + self.options.style.tip.size.height;
        path = 'm' + coordinates[0][0] + ',' + coordinates[0][1];
        path += ' l' + coordinates[1][0] + ',' + coordinates[1][1];
        path += ' ' + coordinates[2][0] + ',' + coordinates[2][1];
        path += ' xe';

        // Create VML element
        tipobject += '<v:shape fillcolor="' + color + '" stroked="false" filled="true" path="' + path + '" coordsize="' + coordsize + '" ' +
        'style="width:' + self.options.style.tip.size.width + 'px; height:' + self.options.style.tip.size.height + 'px; ' +
        'line-height:0.1px; display:inline-block; behavior:url(#default#VML); ' +
        'vertical-align:' + ((corner.search(/top/) !== -1) ? 'bottom' : 'top') + '"></v:shape>';

        // Create a phantom VML element (IE won't show the last created VML element otherwise)
        tipobject += '<v:image style="behavior:url(#default#VML);"></v:image>';

        // Prevent tooltip appearing above the content (IE z-index bug)
        self.elements.contentWrapper.css('position', 'relative');
    };

    // Attach new tip to tooltip element
    self.elements.tip.html(tipobject);
    self.elements.tooltip.prepend(self.elements.tip);

    // Create element reference and draw the canvas tip (Delayed til after DOM creation)
    self.elements.tip = self.elements.tooltip.find('.' + self.options.style.classes.tip).eq(0);
    if ($('<canvas>').get(0).getContext)
        drawTip.call(self, self.elements.tip.find('canvas:first'), coordinates, color);

    // Fix IE small tip bug
    if (corner.search(/top/) !== -1 && $.browser.msie && parseInt($.browser.version.charAt(0)) === 6)
        self.elements.tip.css({ marginTop: -4 });

    // Set the tip position
    positionTip.call(self, corner);
};

Qtip的箭头不会显示在IE中

1 个答案: