Question

在我的容器中，我试图通过动态将tooltip定位到inline元素。我也是这个职位..

问题是，我希望将tooltip保留在text（内联元素的第一个字母）的开头，而不是我从查询中收到的left。

现在一切正常，但tooltip未与start元素的inline点对齐。

如何使用`indexOf（'firstLetter'）计算left位置？

这是我的代码：

var toolTip = '<div class="toolTip" id="toolTip">';
        toolTip += '<a href="#" class="btn btn-info saveText btn-xs copy">Save Text</a>';
        toolTip += '<a href="#" class="btn btn-info makeQuery btn-xs">Make Query</a></div>';

var getPosition = function (element) {
    var childPos = element.offset();
    return childOffset = {
        top: childPos.top ,
        left: childPos.left
    }
}

$('.yellow').on('click', function () {
    var yellow = $('.first');
    var position = getPosition(yellow);
    $('#container').append($(toolTip).css({top:position.top,left:position.left}));
});

$('.green').on('click', function () {
    var green = $('.second');
    var position = getPosition(green);
    $('#container').append($(toolTip).css({top:position.top,left:position.left}));
});

$('.blue').on('click', function () {
    var blue = $('.third');
    var position = getPosition(blue);
    $('#container').append($(toolTip).css({top:position.top,left:position.left}));
});

jsfiddle

Answer 1

为每个position:relative课程尝试span。这是找到toolTip文本的更好方法

.first, .second, .third { position:relative }

和#toolTip css top位置为-35px，以防止工具提示阻止文字。

#toolTip { top:-35px }

这里也更简单的jQuery

var toolTip = '<div class="toolTip" id="toolTip">';
        toolTip += '<a href="#" class="btn btn-info saveText btn-xs copy">Save Text</a>';
        toolTip += '<a href="#" class="btn btn-info makeQuery btn-xs">Make Query</a></div>';

$('.yellow').on('click', function () {
    $('.first').find('div').first().remove(); // remove existing toolTip
    $('.first').append(toolTip);
    $('.second').find('div').first().remove();
    $('.third').find('div').first().remove();
});

$('.green').on('click', function () {
    $('.second').find('div').first().remove();
    $('.second').append(toolTip);
    $('.first').find('div').first().remove();
    $('.third').find('div').first().remove();
});

$('.blue').on('click', function () {
    $('.third').find('div').first().remove();
    $('.third').append(toolTip);
    $('.first').find('div').first().remove();
    $('.second').find('div').first().remove();
});

http://jsfiddle.net/u7qywy6f/5/

在开始时将元素定位到内联元素

1 个答案: