将元素定位为内联元素。

Question

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

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

现在，所有这些都可以工作，但是tooltip没有对齐到inline元素的start点。

如何用“`indexOf(‘firstLetter’)”计算firstLetter位置？

这是我的代码：

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}));
});

小提琴

Answer 1

为每个position:relative类尝试span。这是定位toolTip文本的更好方法

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

而#toolTip css top位置是-35px，以防止toolTip阻塞文本。

#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/