为什么此代码不起作用?我根本听不懂,我花了数小时去做,但仍然找不到我的错误,它可以在jsfiddle上运行,而对我和我的网站则永远不起作用。在jsfiddle jsfiddle
我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My site</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// mouse-on examples
$('#mouseon-examples div').data('powertipjq', $([
'<p><b>Here is some content</b></p>',
'<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
'<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
].join('\n')));
$('#mouseon-examples div').powerTip({
placement: 'e',
mouseOnToPopup: true
});
</script>
</head>
<body>
<div id="mouseon-examples">dfgdg</div>
</body>
</html>
<style type="text/css">
#mouseon-examples div {
background-color: #EEE;
text-align: center;
width: 200px;
padding: 40px;
}
</style>
您必须在jsfiddle中启用文档onLoad选项(编辑:实际上是您这样做的,],>
如果是这样,则需要将其放入代码中:
$(function(){ $('#mouseon-examples div').data('powertipjq', $([ '<p><b>Here is some content</b></p>', '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>', '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>' ].join('\n'))); $('#mouseon-examples div').powerTip({ placement: 'e', mouseOnToPopup: true }); })
-编辑-
似乎您忘记了CSS,请将其添加到html <head>
<link rel="stylesheet" type="text/css" href="http://stevenbenner.github.com/jquery-powertip/styles/jquery.powertip.css">
-编辑-
整个代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="http://stevenbenner.github.com/jquery-powertip/styles/jquery.powertip.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// mouse-on examples
$(function(){
$('#mouseon-examples div').data('powertipjq', $([
'<p><b>Here is some content</b></p>',
'<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
'<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
].join('\n')));
$('#mouseon-examples div').powerTip({
placement: 'e',
mouseOnToPopup: true
});
})
</script>
<style type="text/css">
#mouseon-examples div {
background-color: #EEE;
text-align: center;
width: 200px;
padding: 40px;
}
</style>
</head>
<body>
<div id="mouseon-examples">dfgdg</div>
</body>
</html>
$(document).ready(function(){
$('#mouseon-examples div').data('powertipjq', $([
'<p><b>Here is some content</b></p>',
'<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
'<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
].join('\n')));
$('#mouseon-examples div').powerTip({
placement: 'e',
mouseOnToPopup: true
});
});