툴팁 질문입니다.

https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

 

이걸 적용해보았습니다. 대충 했거든요..

 

아래쪽 DEMO보면

 

https://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/

 

이건데 크롬에서 보면 UX 에 점선으로 두줄이 나옵니다.. 마우스 오버하면 말풍선으로 내용이 나고요.

 

익스나 엣지에서는 한줄로 나오거든요.

 

엊그제만 하더라도 크롬에서 한줄로 나왔는데 왜 갑지가 2줄로 나오는지를 모르겠습니다.

 

즐건 연휴되세요

 

 

 

추가,

 

흐미 다른컴에서 크롬 업데이트를 하지 두줄로 보이네요.. ㅜㅜ

  • ?
    크롬 최신버전에서 나타나는 버그 같아요.
    osvaldas에서 업데이트해주길 기다리면 되겠네요.
  • ? ?
    아 그런가요 감사합니다
  • profile
    CSS
    #info abbr 에 text-decoration: none; 을 추가하세요.
  • profile ?

    #info abb 이곳이 어디에 있는지요?

     

        #info abbr
        {
        text-decoration: none;
        }

     

    이렇게 해봤는데 변함은 없습니다. -_-

  • ? profile

    뭐라고 말씀드려야 할지 남감합니다만...
    툴팁을 적용하셨다고 하셨어...

    가이더님이 샘플로 이야기한 데모페이지에 이상하다고 하셨기에
    그 데모페이지에서의 스타일시트 부분을 지칭하여 이야기 한것입니다.
    데모페이지에서의 두개의 점이 나오는 엘리먼트에 언더라인을 없음을 추가하시면
    나오지 않는다는 의미입니다.

    데모처럼 하지 않으셨다면...
    툴팁을 적용한 엘리먼트(abbr)를 감싸고 있는 부모 엘리먼트겠지요.
    가이더님이 어떻게 구현하셨는지는 알수 없기 때문에 뭐라고, 이것이라고 말할 수는 없습니다.

    -------------------------------------------------------------------------------------------
    만약 첫번째 링크처럼 똑같이 구현하셨다면...
    <abbr title="User Experience" rel="tooltip">UX</abbr>
    위의 경우라면
    <style>
    abbr
    {
    text-decoration: none;
    }
    </style>

    -------------------------------------------------------------------------------------------
    만약 두번째 링크처럼 구혔하셨다면...
    <div id="info">
    <abbr title="User Experience" rel="tooltip">UX</abbr>
    </div>
    위의 경우라면
    <style>
    #info abbr
    {
    text-decoration: none;
    }
    </style>

    -------------------------------------------------------------------------------------------

    "이것이 어디에 있는지요"라고 물으셨지요...
    어디에 적용해야하는지도 궁금하실것 같아 몇글자 덧붙칩니다.

    구현하신 페이지에 그냥 넣으신다면
    <style>태그를 포함하여 넣으시고,

    또는 레이아웃css나 보드스킨css에 넣으신다면
    <style>태그는 빼고 내용만 넣으세요.

    이래도 잘 모르시면 다른분들의 의견을 구해보시길 바랍니다.

  • profile ?
    자세한설명 진심감사드립니다
  • profile ?
    잘됩니다. 감사합니다