search

720kb / angular-tooltips

Angularjs tooltips module, add tooltips to your elements - https://720kb.github.io/angular-tooltips
351 stars 157 forks source link

QUESTION: Is there a reason why the element is wrapped in to custom DOM elements? #196

Closed tiblu closed 7 years ago

tiblu commented 7 years ago

Question

Is there a specific reason why the implementation wraps the target element into custom HTML elements (<tooltip><tip-cont>...) instead of adding the custom elements to the <body> when the tip is to be displayed?

Code:

<a href="#" tooltips tooltip-template="Link tooltip" tooltip-smart="true">Link</a>

Result:

<tooltip tooltips="" tooltip-template="Link tooltip" tooltip-smart="true" class="tooltips _steady _ready _top"> 
    <tip-cont> 
        <a href="#">Link</a> 
    </tip-cont> 
    <tip class=""> 
        <tip-tip> 
            <span id="close-button" style="display: none;">×</span> Link tooltip 
        </tip-tip> 
        <tip-arrow></tip-arrow>
    </tip> 
</tooltip>

Problem

Wrapping like this changes DOM which may cause layout issues when CSS child selectors are used and also because of default for each element is display: block.

Alternative

Add all the tooltip DOM elements to <body> and not wrap original element.

45kb commented 7 years ago

HI @tiblu you can use the option tooltip-append-to-body="true" see https://github.com/720kb/angular-tooltips#doc.

Wrapping the tooltip item is usually or at least in the majority of the cases: much more stable.

Specially if you can use css translations inside the tooltip wrapper to position the tip.

Having tooltips on body level also gets more long on the js side, positioning through css is way faster, stable and shorter (5/6 lines of css).

Of course this code is not perfect and any help is appreciated :)

tiblu commented 7 years ago

@45kb The tooltip-append-to-body still keeps the target element wrapped which still causes issues. But thank you for your quick insight and all the work on this project!

45kb commented 7 years ago

@tiblu you're welcome ;)