CSS가있는 툴팁 위치

내 문제는 툴팁 위치 관련 문제입니다.CSS가있는 툴팁 위치

내가 채택한 스크립트는 절대 위치 지정을 사용하여 링크에서 몇 개의 툴팁을 배치합니다. 큰 화면에서 효과가 있습니다.

그러나 화면이 축소되면 브라우저의 가장자리 근처에 텍스트가 나타나고 가장자리에 툴팁이 표시되는 경우가 있습니다.

이 문제를 해결하기 위해 나는 자신 만의 해킹 해결책을 생각해 냈습니다. @media 화면과 (최대 너비 : 480px) 작은 화면 너비에 대한 상대 위치 지정 규칙 만 포함하면됩니다. . 이것은 효과가 있지만 우아한 것은 아닙니다.

이상적으로, 툴팁은 화면의 가장자리와 같이 화면의 가장자리에 의해 "푸시 (push)"될 것입니다. 그러나 이것을 달성하는 방법에 대해서는 잘 모릅니다.

잘하면, 그건 의미가 있습니다.

어쨌든 here's a link to the page that I've used this all on (툴팁 텍스트에 점선이 있음) 및 here's the CSS behind it.

출처

2012-07-26 joshuahutt

JavaScript/jQuery를 사용해도 되니? –

내가 될 것이라고 생각하지만, 익숙하지 않은 코드가 더 많이 도입됩니다. Rob이 제안한 백분율 너비는 "float : left"와 함께 사용하면 크게 효과가있는 것으로 보입니다. 이전에는 절대 위치 지정과 함께 사용했지만 오버 플로우 문제가있었습니다. 상대 위치 지정에서는 문제가없는 것 같습니다. – joshuahutt

em을 사용하는 대신 백분율을 사용하지만 백분율은 항상 툴팁 크기의 부모의 백분율임을 기억해야합니다.

출처

2012-07-26 11:58:35 Rob

제안 해 주셔서 감사합니다. 나는 그것을 시도했지만, 당신이 진술 한 이유 때문에 그것은 기능적 해결책이 아닙니다. 부모는 짧은 링크이므로 너무 좁게 만듭니다. – joshuahutt

사실, 100 %의 음수 여백으로 시도했지만 완벽하게 작동하는 것 같습니다. 좀 더 테스트를 해보 겠지만, 이것은 분명히 작은 화면 크기의 개선으로 보입니다. 감사! – joshuahutt

CSS가있는 툴팁 위치

답변

관련 문제