Question

我试图像这样制作标题输出

enter image description here
标题输出位于输入旁边。
但是我的代码的结果总是在输入的顶部。

这是我的代码

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>

meybe我的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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>

Answer 1

您在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）：

This is how it looks (without your own css)

另请注意，如果左侧没有可用的空间，工具提示将移动到可用空间的位置。因此，请保持浏览器窗口最大化以进行测试。

如何将标题工具提示输出放在输入旁边？

1 个答案:

如何将标题工具​​提示输出放在输入旁边？

1 个答案:

如何将标题工具提示输出放在输入旁边？