Javascript 将不同的宽度和高度设置为2引导工具提示

Javascript 将不同的宽度和高度设置为2引导工具提示,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我添加了两个工具提示,一个用于切换开关,另一个用于li元素。我想用不同的宽度和高度设置两个工具提示的样式。我尝试添加模板类来切换开关工具提示以设置宽度和高度,以便其他工具提示(li元素)获得默认的宽度和高度,但这对我不起作用 html JS $(document).mouseover('switch-label',function(){ $('[data toggle=“tooltip”]')。工具提示({模板:“”, }); }); $(文档).mouseover(“#头项目a”,函数(

我添加了两个工具提示,一个用于切换开关,另一个用于li元素。我想用不同的宽度和高度设置两个工具提示的样式。我尝试添加模板类来切换开关工具提示以设置宽度和高度,以便其他工具提示(li元素)获得默认的宽度和高度,但这对我不起作用

html

JS

$(document).mouseover('switch-label',function(){
$('[data toggle=“tooltip”]')。工具提示({模板:“”,
});   
});
$(文档).mouseover(“#头项目a”,函数(){
$('#header proj a').tooltip().attr(“数据原始标题”,“tooltip2”);
}
});
<label class='switch switch-flat'><input class='switch-input both' type='checkbox' checked /><span class='switch-label' data-toggle='tooltip' data-html='true' id='switch-tooltip' data-placement='top' title='tooltip1' data-on='yes' data-off='no'></span> <span class='switch-handle'></span> </label>

 <ul><li id="header-proj"  data-toggle="tooltip" data-placement="top" title=""><a href="#myprojModal" class="proj-link" id="main-proj"  data-toggle="tooltip" data-placement="top" title="tooltip2">Untitled</a></li></ul>

.switch {
position: relative;
/* display: block; */
width: 80px;
height: 30px;
/* padding: 3px; */
/* margin: 0 10px 10px 0; */    
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
/* top: 0; */
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
 background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
/* left: 10px; */
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}

  .header.tooltip-inner{
    text-align: left;
    max-width: 100% !important;
    height: 65px;
    width:150px;
    font-size: 12px;
  }
$(document).mouseover('switch-label',function(){
           $('[data-toggle="tooltip"]').tooltip({template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner header"></div></div>',
          });   
          });

 $(document).mouseover('#header-proj a',function(){
          $('#header-proj a').tooltip().attr("data-original-title","tooltip2");
        }
        });