Question

如何更改切换开关上的工具提示文字。
1）首先默认情况下，我必须提供一些工具提示 2）此外，每当我点击切换开关时，我都必须更改工具提示但是以下代码无法正常工作

问题
1）我得到的工具提示不正确。它不是来自基金会。任何人都可以告诉我如何使这个工具提示美化或只是添加一类基础

任何人都可以指导我做错的地方

我正在使用基金会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

试试这个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

在JavaScript代码段中，$( this )返回未定义的元素。将其更改为：

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>

更改切换开关上的工具提示文本

2 个答案: