如何将标题工具提示输出放在输入旁边？
how can i put the title tooltip output beside the input?
我试着把标题输出成这样
标题输出在输入旁边。
但是我的代码的结果总是在输入的顶部。
这是我的代码
insertpage.php
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel='stylesheet' type='text/css' href='style.css'> <!-- Css Buatan -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <!-- Css BootStrap -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<?php
$tanggal = date("Y-m-d");
echo"
<br>
<center>
<div id='boxedit'>
<center> Insert New Page </center><br>
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>
<table border=1 class='table'>
<tr>
<td> Foto </td> <td> <input type='file' name='fotoh'> </td>
</tr>
<tr>
<td> Judul </td> <td> <input title='Masukan Judul Disini' type=text name=judul id=judul maxlength='50' size='50' required placeholder='Masukan Judul'> <small>*</small> </td>
</tr>
<tr>
<td> Deskripsi </td> <td> <textarea title='Masukan Deskripsi Disini' class='inserttext' required rows='9' cols='80' id=deskripsi name='deskripsi' > </textarea> </td>
</tr>
<tr>
<td> Isi </td> <td> <textarea title='Masukan Isi Disini' class='inserttext' required rows='9' cols='80' id=isi name='isi'> </textarea> </td>
</tr>
<tr>
<td> Label </td> <td> <input title='Masukan Label Disini' required type=text id=label name=label placeholder='Masukan Label'><input type=hidden name=tgl_dibuat id=tgl_dibuat value=".$tanggal."> <small>*</small> </td>
</tr>
</table>
<br>
<button id='btn'>Save</button>
<br> <div class='hasil'> </div>
</form>
</div>
</center>
<br>
<br>
";
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('document').ready(function(){
$(function() {
var tooltips = $( "[title]" ).tooltip({
position:{
my: "left top",
at: "right+5 top-5"
}
});
});
})
</script>
</body>
</html>
可能是我的 jquery 脚本或类似的东西出了点问题
拜托，我需要帮助，我已经厌倦了修复这个问题。
非常感谢您的关注。
编辑代码：
index.php
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel='stylesheet' type='text/css' href='style.css'> <!-- Css Buatan -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <!-- Css BootStrap -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<!-- Memulai Tampilan Header -->
<div class="bs-component">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-inverse-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">ARK-LYOD </a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="manage.php">Manage Pages</a></li>
<li><a href="insertpage.php">Tambah Page Baru</a></li>
</ul>
</li>
<li><a href="http://www.facebook.com/mr.araku.lyod">About Me</a></li>
</ul>
</div>
</div>
</div>
<?php
$tanggal = date("Y-m-d");
echo"
<br>
<center>
<div id='boxedit'>
<center> Insert New Page </center><br>
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>
<table border=1 class='table'>
<tr>
<td> Foto </td> <td> <input type='file' name='fotoh'> </td>
</tr>
<tr>
<td> Judul </td> <td> <input title='Masukan Judul Disini' type=text name=judul id=judul maxlength='50' size='50' required placeholder='Masukan Judul'> <small>*</small> </td>
</tr>
<tr>
<td> Deskripsi </td> <td> <textarea title='Masukan Deskripsi Disini' class='inserttext' required rows='9' cols='80' id=deskripsi name='deskripsi' > </textarea> </td>
</tr>
<tr>
<td> Isi </td> <td> <textarea title='Masukan Isi Disini' class='inserttext' required rows='9' cols='80' id=isi name='isi'> </textarea> </td>
</tr>
<tr>
<td> Label </td> <td> <input title='Masukan Label Disini' required type=text id=label name=label placeholder='Masukan Label'><input type=hidden name=tgl_dibuat id=tgl_dibuat value=".$tanggal."> <small>*</small> </td>
</tr>
</table>
<br>
<input type=submit id='btn' value='Save'>
<br> <div class='hasil'> </div>
</form>
</div>
</center>
<br>
<br>
";
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('document').ready(function(){
$('#btn').click(function(event){
event.preventDefault();
$.ajax({
url : $('#form1').attr('action'),
type: "POST",
data : new FormData($('#form1')[0]),
processData: false,
contentType: false,
success:function(){
alert("Berhasil Insert");
$('input').val("");
$('textarea').val("");
}
});
})
$(function() {
var tooltips = $( "[title]" ).tooltip({
position:{
my: "left top",
at: "right+5 top-5"
}
});
});
})
</script>
</body>
</html>
您的 link 到 jQuery UI css 文件中有一个错误：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
应该是：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
注意缺失的http:
解决这个问题，它就会开始工作。
这是我电脑上的样子（没有你自己的css）：
另请注意，如果左侧没有 mush space，工具提示将移动到 space 可用的位置。所以保持浏览器 window 最大化来测试这个。
我试着把标题输出成这样
标题输出在输入旁边。
但是我的代码的结果总是在输入的顶部。
这是我的代码
insertpage.php
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel='stylesheet' type='text/css' href='style.css'> <!-- Css Buatan -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <!-- Css BootStrap -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<?php
$tanggal = date("Y-m-d");
echo"
<br>
<center>
<div id='boxedit'>
<center> Insert New Page </center><br>
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>
<table border=1 class='table'>
<tr>
<td> Foto </td> <td> <input type='file' name='fotoh'> </td>
</tr>
<tr>
<td> Judul </td> <td> <input title='Masukan Judul Disini' type=text name=judul id=judul maxlength='50' size='50' required placeholder='Masukan Judul'> <small>*</small> </td>
</tr>
<tr>
<td> Deskripsi </td> <td> <textarea title='Masukan Deskripsi Disini' class='inserttext' required rows='9' cols='80' id=deskripsi name='deskripsi' > </textarea> </td>
</tr>
<tr>
<td> Isi </td> <td> <textarea title='Masukan Isi Disini' class='inserttext' required rows='9' cols='80' id=isi name='isi'> </textarea> </td>
</tr>
<tr>
<td> Label </td> <td> <input title='Masukan Label Disini' required type=text id=label name=label placeholder='Masukan Label'><input type=hidden name=tgl_dibuat id=tgl_dibuat value=".$tanggal."> <small>*</small> </td>
</tr>
</table>
<br>
<button id='btn'>Save</button>
<br> <div class='hasil'> </div>
</form>
</div>
</center>
<br>
<br>
";
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('document').ready(function(){
$(function() {
var tooltips = $( "[title]" ).tooltip({
position:{
my: "left top",
at: "right+5 top-5"
}
});
});
})
</script>
</body>
</html>
可能是我的 jquery 脚本或类似的东西出了点问题
拜托，我需要帮助，我已经厌倦了修复这个问题。
非常感谢您的关注。
编辑代码： index.php
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<link rel='stylesheet' type='text/css' href='style.css'> <!-- Css Buatan -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <!-- Css BootStrap -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<!-- Memulai Tampilan Header -->
<div class="bs-component">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-inverse-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">ARK-LYOD </a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="manage.php">Manage Pages</a></li>
<li><a href="insertpage.php">Tambah Page Baru</a></li>
</ul>
</li>
<li><a href="http://www.facebook.com/mr.araku.lyod">About Me</a></li>
</ul>
</div>
</div>
</div>
<?php
$tanggal = date("Y-m-d");
echo"
<br>
<center>
<div id='boxedit'>
<center> Insert New Page </center><br>
<form id='form1' enctype='multipart/form-data' action='simpanpage.php' method='post'>
<table border=1 class='table'>
<tr>
<td> Foto </td> <td> <input type='file' name='fotoh'> </td>
</tr>
<tr>
<td> Judul </td> <td> <input title='Masukan Judul Disini' type=text name=judul id=judul maxlength='50' size='50' required placeholder='Masukan Judul'> <small>*</small> </td>
</tr>
<tr>
<td> Deskripsi </td> <td> <textarea title='Masukan Deskripsi Disini' class='inserttext' required rows='9' cols='80' id=deskripsi name='deskripsi' > </textarea> </td>
</tr>
<tr>
<td> Isi </td> <td> <textarea title='Masukan Isi Disini' class='inserttext' required rows='9' cols='80' id=isi name='isi'> </textarea> </td>
</tr>
<tr>
<td> Label </td> <td> <input title='Masukan Label Disini' required type=text id=label name=label placeholder='Masukan Label'><input type=hidden name=tgl_dibuat id=tgl_dibuat value=".$tanggal."> <small>*</small> </td>
</tr>
</table>
<br>
<input type=submit id='btn' value='Save'>
<br> <div class='hasil'> </div>
</form>
</div>
</center>
<br>
<br>
";
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('document').ready(function(){
$('#btn').click(function(event){
event.preventDefault();
$.ajax({
url : $('#form1').attr('action'),
type: "POST",
data : new FormData($('#form1')[0]),
processData: false,
contentType: false,
success:function(){
alert("Berhasil Insert");
$('input').val("");
$('textarea').val("");
}
});
})
$(function() {
var tooltips = $( "[title]" ).tooltip({
position:{
my: "left top",
at: "right+5 top-5"
}
});
});
})
</script>
</body>
</html>
您的 link 到 jQuery UI css 文件中有一个错误：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
应该是：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
注意缺失的http:
解决这个问题，它就会开始工作。
这是我电脑上的样子（没有你自己的css）：
另请注意，如果左侧没有 mush space，工具提示将移动到 space 可用的位置。所以保持浏览器 window 最大化来测试这个。