search

wintercounter / Protip

A new generation jQuery Tooltip plugin
http://protip.rocks
MIT License
359 stars 38 forks source link

improper positioning of `target=true` #19

Closed ghost closed 8 years ago

ghost commented 8 years ago

After getting rid of html title=... across my app and replacing things with protip, I noticed my body was overflowing on the x-axis. Some digging around revealed that for those elements aligned on the right of the page (things like a user/settings dropdown tucked into the upper right) the protip-container was causing an overflow.

The simple fix is to explicitly declare target="body", but this negates the advantage of using true along with observers, which ensures that the tooltip dom elements are removed when no longer needed. I don't like a polluted dom, and protip's approach is a 1-to-1 instead of a 1-for-all (curious as to why this is... is it ever possible to have more than one tooltip open at one time? If not, you could just reuse the same container and save quite a lot of dom manipulation), but that's besides the point. Adding a tooltip shouldn't cause an overflow of the whole app.

wintercounter commented 8 years ago

Sorry for answering so late. I was sick and also work...

observer: true - This is not for auto removing from the DOM. This is to detect attribute changes. There are two observers. One global to detect DOM removes/additions and with observer: true Protip will spawn another to detect the mentioned changes. The global is enabled by default.

<span class="src1 protip" data-pt-title="Title"></span>
document.querySelector('.src1').setAttribute('data-pt-title', 'Title2')
// Tooltip will show: Title

<span class="src1 protip" data-pt-title="Title" data-pt-observer="true"></span>
document.querySelector('.src1').setAttribute('data-pt-title', 'Title2')
// Tooltip will show: Title2

target: true - This is a tricky thing because it appends a DOM element inside your own DOM. Protip doesn't know how your element looks/works like. It simply can inherit/interfere with your existing style and it's up to you to fix these issues.

This is a common fix for the overflow issue in desktop/mobile:

html, body {
    overflow-x: hidden;
}

I hope i understood your problem right.

wintercounter commented 8 years ago

Closing this ticket now. Comment again if further assistance required.