自定义 title 提示信息框

最新推荐文章于 2022-12-23 12:23:21 发布

a412588063

最新推荐文章于 2022-12-23 12:23:21 发布

阅读量862

点赞数

本文链接：https://blog.csdn.net/a412588063/article/details/18710875

版权

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <base href="" />
       <meta charset="utf-8" />
       
       <base href="<%=basePath%>">
       
   </head>
   <style type="text/css">
#tooltip{
   position:absolute;
   border:1px solid #333;
   background:#fff;
   padding:3px 3px 3px 3px;
   color:#333;
   display:none;

   word-break: break-all;
   width: 180px;
}
</style>

   <body>
       <script type="text/javascript" src="jquery-1.8.3.js"></script>
       This is my JSP page.
       <br>
       <input id="mybutton" type="button" name="aaaaa" value="test"
           οnclick=
   tosubmit1();;;;;;;;
/>
       <br>

       <video width="320" height="240" controls="controls">
       <source src="http://baidu.v.ifeng.com/kan/XSWQ?fr=v.baidu.com/"
           type="video/ogg">
       <source src="http://baidu.v.ifeng.com/kan/XSWQ?fr=v.baidu.com/"
           type="video/mp4">
       </video>

       <br />

       <div id="link">
           <p>
               <a href="#" class='tooltip'
                   title="sdfffsdfffffffffffsdfdsfdsf1ffffffffsdfdsfdsf1">提示提示提示提示提示提示提示提示1</a>
           </p>
           <p>
               <a href="#" class='tooltip' title="sdfffffffsdfffffffffffsdfdsfdsf2ffffsdfdsfdsf2">提示提示提示提示提示提示2</a>
           </p>
           <p>
               <a href="#" class='tooltip'
                   title="sdfffffffffsdfffffffffffsdfdsfdsf123ffsdfdsfdsf123">自带提示自带提示自带提示自带提示1</a>
           </p>
           <p>
               <a href="#" class='tooltip'
                   title="sdffffffffffsdfffffffffffsdfdsfdsf234fsdfdsfdsf234">自带提示自带提示自带提示自带提示自带提示2</a>
           </p>
       </div>
   </body>

   <script type="text/javascript">
   function tosubmit1() {
       var myurl = "http://localhost:8080/CrcPortalWS/services/empmanager/saveEmpInfo"
       var mydata = '{"officePhone":"86755-82668888","officeExtPhone":"2285","mobilePhone":"13631529111","userId":"chenyihong4","emplid":"10000042","isShowMobile":"Y","isShowPhoto":"Y"}';
       $.ajax( {
           type : 'POST',
           url : myurl,
           data : mydata,
           dataType : "json",
           contentType : "application/json",
           success : function(data) {
               alert(data);
           }
       });
   }

   /

   $(function() {
       var x = 10;
       var y = 20;
       $("a.tooltip").mouseover(function(e) {
           this.myTitle = this.title;
           this.title = "";
           var tooltip = "<div id='tooltip'>"+ this.myTitle +"</div>";
           $("body").append(tooltip); //把它追加到文档中
               $("#tooltip").css( {
                   "top" : (e.pageY + y) + "px",
                   "left" : (e.pageX + x) + "px"
               }).show("fast"); //设置x坐标和y坐标，并且显示
           }).mouseout(function() {
           this.title = this.myTitle;
           $("#tooltip").remove(); //移除
           });
   });
</script>
</html>