我有这段代码:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
工具提示出了一些问题 - 它应该出现在jQuery UI的样式中,但它没有,并且放错了 - 即使对于边距较大的按钮,它也会出现在屏幕的左侧(和我一样)说没有任何样式,它看起来像纯文本),即使有,跟踪“属性设置为,真”它不完全跟随光标,但仍然出现在页面的左侧,并在我移动光标时移动一点。 我认为这是一个非常简单的例子(代码是我工作中出现的简化问题),我看不出我做错了什么。如果有人帮助我,我会很高兴 - 提前谢谢你。
P.S。 Snippet,这与我在浏览器中的行为完全相同:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".has-tooltip").each(function(){
$(this).tooltip({content: "test", items: "button"});
});
});
</script>
</HEAD>
<BODY>
<BUTTON class="has-tooltip" style="margin-left: 100px;">First</BUTTON>
<BUTTON class="has-tooltip" style="margin-left: 200px;">Second</BUTTON>
</BODY>
</HTML>
答案 0 :(得分:2)
您没有正确链接到css文件。
替换:
<link rel="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
使用:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">