#HASHTAG ionicon 마우스 호버시 타이틀 수정하기

이번에 #HASHTAG 구매한 후 여기저기 보고 있는 중인데요.

 

#HASHTAG 레이아웃에서 ionicon v.5.4.0를 쓰고 있는데 해당 아이콘에 마우스 호버시 tooltip으로 title이 표시됩니다.

메뉴쪽을 보다보니 메뉴이름에는 a태그에 title을 주어 tooltip에 나타나게 되는데

메뉴 오른쪽 아래화살표(▽)에는 ionicon의 이름이 그냥 나오더군요.

 

title을 적용해봐도 안되고 ionicon 최신버젼으로 해도 안되고 구글링 해보니 v.5 의 버그라고 합니다.

구글링중 해결 방법이 있어서 적용해보니 잘되어 공유합니다.

 

사이드바 영역만 예로 보여드리고 다른 곳도 같은 방식으로 적용하시면 될 듯 합니다.

▶\components\sidebar\sidebar-nav.js 에 추가

 

jQuery(function($) {

  $('.app-sidebar-nav-more').on('click', function() {

    $(this).parent().next().toggleClass('active')

  })

})

// ionicon title 추가

jQuery(function($) {

  $('.app-sidebar-nav-more').hover(function() {

    let ionicons = document.querySelectorAll('ion-icon');

    ionicons.forEach(icon => {

      let properTitle = icon.getAttribute('title');

      if (properTitle) {

        icon.shadowRoot.querySelector('.icon-inner svg title').innerHTML = properTitle

      }

    })

  })

})

 

▶ \components\sidebar\sidebar-nav.html 의 ion-icon 에 title 추가

 

      <div class="app-sidebar-nav-item">

        <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'" title="{$val2['link']}">

          <ion-icon cond="$val2['desc']" name="{$val2['desc']}"></ion-icon>

          <span>{$val2['link']}</span>

        </a>

        

        <ion-icon cond="$val2['list']" name="chevron-down-outline" class="app-sidebar-nav-more" title="{$lang->cmd_open} / {$lang->cmd_close}"></ion-icon>

      </div>

 

※ ion-icon 에 title 추가하지 않으면 기존과 동일하게 ionicon name 그대로 표시됩니다.