Position element relative to selection range

[slorber]

Hi,

I'd like to know if it would be possible to use Tether to position a dropdown according to a selection range.

My usecase is that I have a contenteditable div, on which the user can type text, and can also type things like @something and then we should display a suggestion dropdown on top or under the range (like github / twitter suggestions somehow) The suggestion dropdown should be under the word, or eventually above if there is not enough space under. The suggestion dropdown should follow the scroll. So Tether seems a nice solution for that.

The problem is that so far I can only position tether according to a DOM node, and not a selection range so the dropdown is not well-positionned: it does under the contenteditable corner I choose, instead of under the word under caret.

I am able to get the relative X / Y of the word inside its container with something like

            var wordRangeAbsolute = getCurrentWordRange().getBoundingClientRect();
            var contentEditableAbsolute = domNode.getBoundingClientRect();
            var wordRelativePosition = {
                top: wordRangeAbsolute.top - contentEditableAbsolute.top,
                left: wordRangeAbsolute.left - contentEditableAbsolute.left
            };

Then I can position the tethered element relative to its normal position. For X, it works fine, but for Y the problem arrise because of the possibility that Tether has to position the element above or under my word.

[zackbloom]

One way of handling this would be to position the tether relative to an invisible element you place over the selected area of text.

On Wed, Oct 28, 2015 at 12:18 PM, Sébastien Lorber <[email protected]

wrote:

Hi,

I'd like to know if it would be possible to use Tether to position a dropdown according to a selection range.

My usecase is that I have a contenteditable div, on which the user can type text, and can also type things like @something https://github.com/something and then we should display a suggestion dropdown on top or under the range (like github / twitter suggestions somehow) The suggestion dropdown should be under the word, or eventually above if there is not enough space under. The suggestion dropdown should follow the scroll. So Tether seems a nice solution for that.

The problem is that so far I can only position tether according to a DOM node, and not a selection range so the dropdown is not well-positionned: it does under the contenteditable corner I choose, instead of under the word under caret.

I am able to get the relative X / Y of the word inside its container with something like

        var wordRangeAbsolute = getCurrentWordRange().getBoundingClientRect();
        var contentEditableAbsolute = domNode.getBoundingClientRect();
        var wordRelativePosition = {
            top: wordRangeAbsolute.top - contentEditableAbsolute.top,
            left: wordRangeAbsolute.left - contentEditableAbsolute.left
        };

Then I can position the tethered element relative to its normal position. For X, it works fine, but for Y the problem arrise because of the possibility that Tether has to position the element above or under my word.

— Reply to this email directly or view it on GitHub https://github.com/HubSpot/tether/issues/133.

[slorber]

Hi,

That seems possible but quite hacky. And I guess I'll have to reposition my invisible element myself on scroll ;) will try that when I have time

[deadlocks]

Hi, @slorber I am also facing the same issue. Is there any other workaround apart from injecting invisible element over selection?