- http://craigsworks.com/projects/qtip2/download
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
- <script type="text/javascript" src="lib/jquery.qtip-1.0.0-rc3.min.js"></script>
- <script type="text/javascript">
- $(document).ready(
- function(){
- //下面使用的是插件默認的樣式顯示,content是指要顯示的內容（包括文字和圖片）
- $("#huangbiao").qtip({
- content: 'Stems are great for indicating the context of the tooltip.',
- style: {
- tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
- }
- });
- //style json是對提示樣式的設置即外面的div樣式設置，但是沒有設置具體的位置
- $("#huangbiao1").qtip({
- content: '設置顯示文字樣式',
- style: {
- width: 200,
- padding: 5,
- background: '#A2D959',
- color: 'black',
- textAlign: 'center',
- border: {
- width: 7,
- radius: 5,
- color: '#A2D959'
- },
- tip: 'bottomLeft',
- name: 'dark' // Inherit the rest of the attributes from the preset dark style
- }
- });
- //name:'green' 是繼承了默認的提示樣式，還有其他的name可以參考幫助文檔
- $("#huangbiao2").qtip({
- content: '使用插件自定義的樣式',
- style: {
- name: 'green' // Notice the corner value is identical to the previously mentioned positioning corners
- }
- });
- //target:表示提示信息顯示在控件的什麼位置
- //tooltip:
- $("#huangbiao3").qtip({
- content: 'Stems are great for indicating the context of the tooltip.',
- position: {
- corner: {
- target: 'topLeft',
- tooltip: 'bottomLeft'
- }
- }
- });
- $("#huangbiao4").qtip({
- content: '<img src="img/2.jpg">',
- });
- //show 是指顯示的情況，when是指什麼事件觸發讓它顯示出來，hide與show對應
- //solo:
- $("#huangbiao5").qtip({
- content: '<img src="img/2.jpg">',
- show:{
- when:'click',
- solo:false
- },
- hide:{
- when:'click',
- solo:false
- }
- });
- //顯示類似於“窗口”模式的樣式，含有title和內容的提示信息
- $("#huangbiao6").qtip({
- content: {
- title: {
- text: 'content-title-text',
- button: 'button'
- },
- text: 'content-text'
- },
- fixed:true
- });
- //api:是回調函數，beforeShow是在顯示提示之前的提示信息，beforeHide則恰好相反；onRender是指內容呈現後調用
- $("#huangbiao7").qtip({
- content: 'use callback function',
- api:{
- beforeShow:function(){
- alert("beforeShow api function");
- },
- beforeHide:function(){
- alert("beforeHide api function");
- }
- }
- });
- $("#huangbiao9").qtip({
- content: '',
- style:{
- width:"1024px",
- height:"1024px",
- background:"black"
- }
- });
- }
- );
- </script>
- <title>無標題文檔</title>
- </head>
- <div style="text-align:center;"><span id="huangbiao">顯示普通文字</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao1">設置顯示文字樣式</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao2">使用插件自定義的樣式</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao3">設置提示的顯示位置</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao4">顯示圖片</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao5">點擊事件顯示以及隱藏提示</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao6">含有標題的提示信息</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao7">使用回調函數</span></div>
- <p>
- <div style="text-align:center;"><span id="huangbiao9">遮蓋全屏</span></div>
- <body>
- </body>
- </html>
（162703689 天天網絡一族qq羣）
