更改拨动开关上的工具提示文本

Question

How to change the tooltip text on the toggle switch.
1) Firstly by default, I have to give some tooltip
2) Also, whenever I click on toggle switch I have to change the tooltip But the below code is not working properly

Problem
1) The tooltip which I am getting is not correct. It is not coming from the foundation. Can anyone tell me how we can make this tooltip beautify or just add a class of foundation

Can anyone guide me where I am doing wrong

I am using Foundation 5

<ul class="header-info details collapse ch_en_switch">
    <li class="switch small" onclick="chn_tooltip"  id="chinese_toggle_tooltip" aria-haspopup="true" title="click to see player name in chinese">
      <span class="switch_text">EN</span>
      <input id="chn_eng_toggle" onclick="chinese_toggle" type="checkbox">
      <label for="chn_eng_toggle"></label>
      <span class="switch_text">CH</span>
    </li>
  </ul>




    function open_tooltip(){
       $(this).click(function(e){
       if ( $( '#chn_eng_toggle' ).is(':checked') ){
         $( '#chinese_toggle_tooltip' ).attr( 'title', '' )
         $( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in english' ).foundation('toggle')
       }
       else{
         $( '#chinese_toggle_tooltip' ).attr( 'title', '' )
         $( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in chinese' ).foundation('toggle')
       }
       });
    }

Answer 1

try this https://jsfiddle.net/pnnvqj6g/

<ul class="header-info details collapse ch_en_switch">
  <li class="switch small" data-tooltip-class="aniket" id="chinese_toggle_tooltip" data-tooltip aria-haspopup="true" title="">
    <span class="switch_text">EN</span>
    <input id="chn_eng_toggle" type="checkbox" onclick="open_tooltip()">
    <label for="chn_eng_toggle"></label>
    <span class="switch_text">CH</span>
  </li>
</ul>


function open_tooltip(){
  if ($("#chn_eng_toggle").is(":checked")) {
    $('#chinese_toggle_tooltip').attr('title', 'aniket');
  } else {
     $('#chinese_toggle_tooltip').attr('title', 'shivam');
  }
}

Answer 2

In your JavaScript code snippet, $( this ) returns an undefined elements. Change it to:

if( $ ( '#chn_eng_toggle' ).is( ':checked' ) )

 function open_tooltip () { if ( $( '#chn_eng_toggle' ).is( ':checked' ) ) $( '#chinese_toggle_tooltip' ).attr( 'title', 'aniket' ) else $( '#chinese_toggle_tooltip' ).attr( 'title', 'shivam' ) } </script> 

 label { position: relative; display: inline-block; width: 40px; height: 12px } label input { display:none } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s } .slider:before { position: absolute; content: ""; height: 8px; width: 18px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s } input:checked + .slider { background-color: #2196F3 } input:focus + .slider { box-shadow: 0 0 1px #2196F3 } input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="header-info details collapse ch_en_switch"> <li class="switch small" onclick="open_tooltip( event )" data-tooltip-class="aniket" id="chinese_toggle_tooltip" aria-haspopup="true" title="shivam"> <span class="switch_text">EN</span> <label for="chn_eng_toggle"> <input id="chn_eng_toggle" type="checkbox"> <span class="slider"></span> </label> <span class="switch_text">CH</span> </li> </ul>