Я поместил 3 текстовых элемента всплывающей подсказки, используя CSS position:relative, top и left с пикселями рядом с выпадающими меню. Показанный текст называется «Что это?».
Единственная проблема - каждый браузер и устройство по-разному отображают выпадающие списки, отбрасывая мое позиционирование. Есть ли лучший способ расположить их, чтобы мне не приходилось писать разные правила для каждого устройства и браузера?
button.krank-tooltip.ttone {position: relative;top: 73px;right: -280px;}
button.krank-tooltip.tttwo {position: relative;top: 114px;right: -168px;}
button.krank-tooltip.ttthree {position: relative;top: 154px;right: -108px;}
Вот как это выглядит на Mac с Google:
(http://gyazo.com/f67d52f2e6db4cc9488247f5877f79e1)
а вот Windows 8.1 с Google:
(http://gyazo.com/4577e66867ecb180ba293f2ca504c10b)
На Mac выглядит корректно, но на ПК слегка отключено.