[popup] display is shifted when `zoom` CSS property is used

[azmeuk]

Bug Report

I like the global appearance of Fomantic a little bit bigger. As it is not possible to do it natively, I use the zoom css property:

html {
    zoom: 1.2;
}

This cause a display issue for popup titles. Everything is shifted to the right and to the bottom:

$('*[title]').popup();

Testcase

https://jsfiddle.net/3pm02h9y/

Screenshot (if possible)

Here, the mouse is over the refresh button but the popup is displayed far away:

Version

2.9.4

[lubber-de]

• To control the overall font size you can make use of the variable "fontSize" and adjust it according to your needs inside your "site.variables" file (you need to recompile fomantic though)

Fomantic-UI/src/themes/default/globals/site.variables

Lines 138 to 142 in 170f52a

	/* The size of page text */
	@fontSize: 14px;
	/* -------------------

• Regarding the zoom issue: We have to investigate. Doing a quick test, it really only happens when using the zoom property (when doing it via browser controls (like CTRL+Mousewheel), it did not happen to me.

Anyway, there is a workaround (for simple text popups):
When using pure CSS tooltips, it works in every zoom property i tried
so, dont use the popup javascript module, but only add data-tooltip="Lorem ipsum" and optional adjust its position via data-position
See https://jsfiddle.net/lubber/v2eskwcr/14/

[azmeuk]

data-tooltip works, but this causes an issue with corner labeled input:

<div class="ui corner labeled input">
  <input type="text">
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

With title=

With data-tooltip=

[lubber-de]

data-tooltip works, but this causes an issue with corner labeled input:

🤔 Cannot reproduce using latest nightly beta

<div class="ui corner labeled input" data-tooltip="test" data-position="bottom right">
  <input type="text">
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

results in

See https://jsfiddle.net/lubber/4m8Lrtbf/2/

[azmeuk]

It happens when the tooltip is on the label. Usually I use this label to indicate that the field is mandatory, which the tooltip indicate.

https://jsfiddle.net/tk3pn19b/

[lubber-de]

It happens when the tooltip is on the label

jsfiddle.net/tk3pn19b

Yeah, just recognized this as well. This happens, because the corner label uses the same pseudo selector.
In that case i suggest to put the tooltip to the input div instead and position it to "bottom right" or "top right" so it still points to the corner label