[HTML, Jquery] title 속성에 유효한 태그 적용

🤔서론

tilte 속성에 html 태그를 적용하려 했지만, 생각처럼 바로 되지 않았어서 글작성..!

---

😏본론

기존

위와 같이 < > 와 같은 특수코드를 이용하여 태그를 만들어주었다.

하지만, 결과는 ...

위와 같이 태그가 그대로 나오게 되었다.

tilte을 바로 출력하면 태그가 적용이 안되는 것 같았다.

그래서 어떻게 할까 찾아보다가 괜찮은 걸 찾았다.

---

수정 후

    <script>
      $(document).ready(function() {
        $('body').append('<div class="tooltip"><div class="tipBody"></div></div>'); 
        var tip;
          $('.tip[title]').mouseover(function(e) { 
              tip = $(this).attr('title'); 
              $(this).attr('title','');   
              console.log(tip);
              $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip ); 
          }).mousemove(function(e) {
            $('.tooltip').css('top', e.pageY + 10 ); // mouse follow!
            $('.tooltip').css('left', e.pageX + 20 );
          }).mouseout(function(e) {
              $('.tooltip').hide(); 
              $(this).attr( 'title', tip );
          });
      });
    </script>

 

1. body에 div를 만들어준다.

2. mouseover를 통해 호버 이벤트
👉 this의 title을 가져온다.
👉 this의 title을 비운다.
👉 body에 추가했던 div에 title내용을 html로 적용한다.

3. mousemove를 통해 위치조절
👉 div의 위치를 동적으로 변경시켜준다.

4. mouseout을 통해 마우스가 나왔을 때
👉 div를 hide시켜준다.
👉 this title에 다시 title정보를 넣어준다.

 

위와 같은 방식으로 title을 그냥 바로 호출하는 것이 아닌 다른 div를 만들어

title의 내용을 다른 div에 적용해서 사용하는 방식으로 사용했다.

 

몇 곳을 더 찾아보았지만 title을 그냥 사용하는 방식보단 다른 div에 넣어서 사용하는 것 같았다.

아무래도 title을 그대로 사용하면 css나 태그나 바로 적용이 되지 않는 것이 맞나보다..

 

 

참고, 인용사이트

https://www.op.gg/champion/gangplank/statistics/top
https://pythonq.com/so/javascript/1245901
https://jsfiddle.net/zfFuu/