<!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. error_reporting()函数用法

    首先要知道error_reporting()函数是用来设置错误级别并返回当前级别的.它有14个错误级别,如下: 1        E_ERROR          致命的运行时错误. 错误无法恢复过来 ...

  2. Js冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  3. Android中AppWidget的分析与应用：AppWidgetProvider .

    from: http://blog.csdn.net/thl789/article/details/7887968 本文从开发AppWidgetProvider角度出发,看一个AppWidgetPrv ...

  4. CoreLocation MKMapView

    高德开发者平台 有开发指南 iOS9配置网络: <key>NSAppTransportSecurity</key> <dict> <key>NSAllo ...

  5. shell排序算法

    今天看<The C Programming Language>的时候看到了shell排序算法, /* shellsort: sort v[0]...v[n-1] into increasi ...

  6. oracle常见sql积累

    select lower('HELLO') from dual;select lpad(100, 5, '*') from dual;select sysdate + 1 / 24 from dual ...

  7. Mosquitto-MQTT

    安装Mosquitto #To use the new repository you should first import the repository package signing key: w ...

  8. [待续]Async in C# 1

    异步.异步是在.net .45里面提供的一个新的方法 它主要用在.三个方面 1.网络访问 2.磁盘访问 3.延迟很长时间的步骤 它主要有2个关键字 Async  Await Async  怎么工作 d ...

  9. TControl的显示函数（5个非虚函数，4个虚函数）和三个例子的执行过程（包括SetParent的例子）

    // 9个显示函数 procedure SetBounds(ALeft, ATop, AWidth, AHeight: Integer); virtual; // 虚函数,important 根据父控 ...

  10. java根据本地Ip获取mac地址

    import java.net.InetAddress; import java.net.NetworkInterface; import java.net.SocketException; impo ...