简单的工具提示插件 - 点击选项不起作用 - jQuery
Simple tooltip plugin - onclick option doesn't work - jQuery
我正在尝试为一个简单的工具提示创建一个jquery插件。工具提示可以有 2 个选项:位置和触发器、顶部或底部位置以及悬停或单击触发器。悬停部分有效,但点击部分无效,我不明白为什么点击事件不会触发。我应该提到这是我的第一个插件,所以我是一个菜鸟。
这是小提琴:http://jsfiddle.net/BjZyy/
该插件如下所示:
(function ($) {
$.fn.tooltip = function(options){
var settings = $.extend({
position : 'top',
trigger : 'hover'
}, options);
var tooltipEl = $(".tooltip-list .tooltip-element");
return tooltipEl.each(function (){
if(settings.trigger == 'hover') {
$(".tooltip").hover( function(){
$(".tooltip-text", $(this).parent()).show();
if(settings.position == 'top') {
$(".tooltip-text").addClass("top-position");
}
if(settings.position == 'bottom') {
$(".tooltip-text").addClass("bottom-position");
}
},
function () {
$(".tooltip-text").hide();
});
}
if (settings.trigger == 'click') {
$(".tooltip").click( function(){
alert("asdasdasd");
$(".tooltip-text", $(this).parent()).show();
if(settings.position == 'top') {
$(".tooltip-text").addClass("top-position");
}
if(settings.position == 'bottom') {
$(".tooltip-text").addClass("bottom-position");
}
},
function () {
$(".tooltip-text").hide();
});
}
});
};
})(jQuery);
这是 HTML :
<div class="tooltip-list">
<div class="tooltip-element">
<a class="tooltip" href="#">Lorem Ipsum</a>
<div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
<div class="tooltip-element">
<a class="tooltip" href="#">Ipsum</a>
<div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
<div class="tooltip-element">
<a class="tooltip" href="#">Lorem Lorem</a>
<div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
<div class="tooltip-element">
<a class="tooltip" href="#">Ipsum Ipsum</a>
<div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
这是 CSS:
.tooltip {
position: relative;
}
.tooltip-element{
position: relative;
padding: 20px;
}
.tooltip-text {
padding: 15px;
background-color: #fff;
border: 1px solid black;
position: absolute;
display: none;
width: 40%;
z-index: 9;
}
.top-position{ top: -115px;}
.bottom-position{ top: 40px;}
这是插件调用:
$(document).ready(function($) {
$('.tooltip-element a').tooltip({position : 'top', trigger : 'hover'});
});
有人可以告诉我我做错了什么吗?
你传递了 2 个回调而不是 1 个,你应该写:
$(".tooltip").click(function(){
// check if opened or closed
// then do your stuff ...
});
相关文章:
- 在Internet Explorer中,向所选内容添加选项不起作用
- Angular js-ng选项不起作用
- 传单地图“中心”选项不起作用
- DateBox的dateFormat选项不起作用
- 双击已添加的选择选项不起作用
- jquery ui自动完成combox重新创建选项不起作用
- 谷歌地图中心选项不起作用
- jQuery多选:计数未选择的选项不起作用
- 简单的工具提示插件 - 点击选项不起作用 - jQuery
- AngularJs 选择 ng 选项不起作用
- j查询更改选择选项不起作用
- 在给定现有答案的情况下,更改日期选择器中的 minDate 选项不起作用
- JavaScript 数据表过滤器选项不起作用
- 主干表单提交按钮选项不起作用
- UglifyJS2 , -m 排序选项不起作用
- 在 elgg 中,jQuery 日期选择器选项不起作用
- 删除裁剪后,图像可拖动选项不起作用
- Typeahead.js预取选项不起作用
- 使用javascript选择另一个选项后,循环隐藏选项不起作用
- 完整日历选项不起作用