<!DOCTYPE html>

<html content="text/html; charset=UTF-8">

<title>tooltip</title>

<script src="jquery-1.10.2.min.js" type="text/javascript"></script>

</head>

<body>

<style type="text/css">

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#333333;

    padding:10px;

    color:#e5e6f0;

    display:none;

    z-index:30;

}

div{ width:100px; height:100px; background:#000; display:inline-block;}

a{ margin:10px; float:left;}

</style>

<a href="" class="tooltip">

<div title="No.1  第一行&lt;br /&gt;

第二行&lt;br /&gt;

第三行"></div>

</a>

<a href="" class="tooltip">

<div  title="No.2  第一行&lt;br /&gt;

第二行&lt;br /&gt;

第三行"></div>

</a>

<script type="text/javascript">

(function($){

    $.fn.tjtooltip = function(set) {

        var settings = $.extend({

            xoffset : 10,

            yoffset : 20,

            tooltip : 'tooltip'

        } , set);

        var tchild = null,

            tipo   = null,

            d_t    = '';

            WinW   = $(window).width(),

            leftPx = 0,

            tipo_width = 0;

        this.hover(function(e){

            tchild = $(this).children()[0];

            d_t = tchild.title;

            tchild.title = '';

            tipo = document.createElement('p');

            tipo.id = settings.tooltip;

            tipo.innerHTML = d_t;

            document.body.appendChild(tipo);

            tipo_width = tipo.offsetWidth;

            leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?

                     ( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );

            tipo.style.top = ( e.pageY - settings.xoffset ) + "px";

            tipo.style.left= leftPx + "px";

            $("#"+settings.tooltip).fadeIn('fast');

            },

            function(){

                tchild.title = d_t;

                $("#"+settings.tooltip).remove();

            }

        );

        this.mousemove(function(e){

            if(!tipo){return false;}

            leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?

                     ( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );

            tipo.style.top = ( e.pageY - settings.xoffset ) + "px";

            tipo.style.left= leftPx + "px";

        });

        return this;

    }

})(jQuery);

$('a.tooltip').tjtooltip();

</script>

</body></html>

jq實現網頁個性title的更多相关文章

  1. Jquery scrollTop animate 實現動態滾動到頁面頂部

    這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足! 之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能. $.fn.backTop = func ...

  2. 邁向 RHCE 之路 (Day26) - Apache 網頁伺服器

    本篇將在 SELinux 安全機制及 IPTables 防火牆開啟的環境下實作,分別實作簡單網頁服務及虛擬主機 Virtual Host 設定,最後則是實作網頁中需要保護網頁時可以透過 .htacce ...

  3. 開玩樹莓派（二）：配置IP，實現無顯示器局域網內Putty連接和RDP遠程

    目錄: 開玩樹莓派(一):安裝Raspbian系統 開玩樹莓派(二):配置IP,實現無顯示器局域網內Putty連接和RDP遠程 開玩樹莓派(三):Python編程 開玩樹莓派(四):GPIO控制和遠程 ...

  4. 使用Mutex實現單一程式執行個體的注意事項（转）

    相信大家都知道在.NET程式中若要實現單一程式執行個體,一般來說有幾種方法,像是去判斷是否已經有開啟的Process是相同的程式.用Mutex與Semaphore之類的技術來判斷是否程式正在開啟.但是 ...

  5. [转载]在網頁上加入HTML5 的Video Tag，直接播放MP4、OGG…等

    在之前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash,HTML5將更普及於網路世界!!)的重要性,而Html 5的主要革新是在他的語意標籤,像是<video> ...

  6. ASP.NET MVC 4.0 学习2-留言板實現

    新增專案實現留言板功能,瞭解MVC的運行機制 1,新增專案   2,添加數據庫文件message.mdf   Ctrl+W,L 打開資料庫連接,添加存放留言的Atricle表 添加字段,後點擊&quo ...

  7. [Xamarin.Android] 結合Windows Azure與Google cloud message 來實現Push Notification （转帖）

    這一篇要討論如何使用Xamarin.Android 整合GCM以及Windows Azure來實作Android手機上的推播通知服務. 這篇文章比較著重概念的部分,在開始讀這篇之前,也可以先參考一下X ...

  8. jQueryMobile 網頁使用 ASP.NET Web API 服務

    微軟的 ASP.NET Web API 框架,能以 RESTful 輕量級的架構風格,建立 HTTP 服務,讓多種不同的用戶端,如: 手機.平板.電腦(PC),透過 HTTP 的 GET.POST.P ...

  9. eafier 簡單易用 HTML、CSS 網頁編輯器（可自動插入 Tag 標籤）

    很久很久以前,一般人要做網頁的話大概都會用 FrontPage 之類的工具,更進階一點的會用 Dreamweaver 等軟體.雖然上述軟體提供很方便的「所見即所得」的編輯預覽模式,但寫出來的網頁程式碼 ...

随机推荐

  1. Wdcp缺少mod_rewite模块

    1.下载apache源码包,解压并查找到mod_rewrite.c文件 tar -zxvf httpd-2.2.27.tar.gz cd httpd-2.2.27 [root@localhost ht ...

  2. Day8 面向对象(补充)

    私有字段 class Foo: def __init__(self, name): self.__name = name def f1(self): print(self.__name) class ...

  3. openerp binary filed import export

    1: user  xmlrpc 2: use csv file to export import but want to change the csv model field_size_limit

  4. 小A项目为什么加班

    1.负责架构搭建的人搭建完成架构后,没有进行落地性验证:导致真正要用到的时候才发现spring没有配置:需要对架构人员的进度和内容进行跟踪,在跟踪进度的时候需要强调落地性: 2.负责架构搭建的人没有提 ...

  5. 转:[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

    原文来自于:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html Autoprefixer解析CSS文件并且添加浏览器前缀到 ...

  6. 转:SSDB：快速取代redis的nosql

    原文来自于:http://hao.jobbole.com/ssdb%EF%BC%9A%E5%BF%AB%E9%80%9F%E5%8F%96%E4%BB%A3redis%E7%9A%84nosql/ S ...

  7. HBase eclipse开发环境搭建

    伪分布式环境安装 事先本机必须部署好了伪分布式hadoop开发环境将Hbase/lib下的 hadoop-core-*.jar 与 hadoop保持一致. 将hadoop下的复制到hbase下将had ...

  8. JavaScript Maintainable

    1. Avoid conflict with Native Variable namespace

  9. Cognos请求流程——<转>

    访问Cognos8 匿名访问 用户通过浏览器发起Cognos访问请求,请求被送至Cognos Gateway Gateway接收请求并发送给一个dispatcher dispatcher发现请求没有附 ...

  10. 图论：(Code Forces) Graph and String

    Graph and String time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...