2013-06-01 41 views
2

我寫的網站,並使用qtip應該消失:使用qtip時失去重心

我想,關注領域時(HTML元素),我會看到每個焦點的提示,並失去焦點的時候 - 工具提示將消失。

有兩種html元素。 輸入(當有焦點時)。 收音機(當沒有焦點時,只需鼠標懸停就可以顯示工具提示)。

這裏是我的代碼(JavaScript的一面,我有它的問題,因爲有時會提示沒有disapeared - 爲什麼?)

function showtooltip(item, val, acorner, ahide) { 
    'use strict'; 
    var tipCorner; 
    if (ahide === undefined) { 
     ahide = 'blur'; 
    } 

    if (acorner === undefined) { 
     acorner = 'bottomLeft'; 
    } 

    if (acorner === "topRight") { 
     tipCorner = "leftMiddle"; 
    } else { 
     tipCorner = "topLeft"; 
    } 

    setTimeout(function() { 
     $(item).qtip({ 
      content: { 
       text: val 
      }, 
      show: { 
       ready: true 
      }, 
      hide: { 
       when: ahide, 
       delay: 0 
      }, 
      style: { 
       //classes: 'ui-tooltip-jtools', 
       background: '#A2D959', 
       width: 400, 
       color: 'black', 
       border: { 
        width: 1, 
        radius: 3, 
        color: '#6699CC' 
       }, 
       tip: { // Now an object instead of a string 
        corner: tipCorner, // We declare our corner within the object using the corner sub-option 
        color: '#6699CC', 
        size: { 
         x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width. 
         y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width! 
        } 
       } 
      }, 
      position: { 
       corner: { 
        target: acorner 
       } 
      }, 
      api: { 
       onHide: function() { 
        $(item).qtip('api').destroy(); 
       }, 
       onShow: function() { 
        setTimeout(function() { $(item).qtip('hide'); }, 2000); 
       } 
      } 
     }); 
    }, 0); 
} 

function showtooltiph(item, val) { 
    'use strict'; 
    showtooltip(item, val, 'bottomLeft', 'mouseout unfocus'); 
} 

而在HTML端: ...

工具提示有時不隱藏,我看到幾個工具提示,這是非常惱人的行爲 - 這可能是什麼原因?

謝謝:)

回答

5

Qtip隱藏和顯示選項可用它可以作爲一個選項被提及。

HTML:

<fieldset> 
    <legend>Validating a complete form</legend> 
    <p> 
     <label for="firstname">Firstname</label> 
     <input type="text" class="show-tip" message="This is Firstname Field" name="firstname" id="firstname"> 
    </p> 
    <p> 
     <label for="password">Password</label> 
     <input type="password" name="password" id="password"> 
    </p> 
    <p> 
     <label for="email">Email</label> 
     <input type="email" name="email" id="email"> 
    </p> 
    <p> 
     <label for="agree">Please agree to our policy</label> 
     <input type="checkbox" name="agree" id="agree" class="checkbox"> 
    </p> 
    <p> 
     <label for="newsletter">I'd like to receive the newsletter</label> 
     <input type="radio" name="gender" id="male" class="radio"> 
    </p> 
    <p> 
     <input type="submit" value="Submit" class="submit"> 
    </p> 
</fieldset> 

代碼:

$(document).ready(function() { 
    var tipOptions = { 
     content: 'Some basic content for the tooltip', 
     show: 'focus', 
     hide: { 
     when: { 
      event: 'unfocus' 
     } 
     } 
    }; 
    $('input[type=text]').qtip(tipOptions); 
    $('input[type=password]').qtip(tipOptions); 
    $('input[type=email]').qtip(tipOptions); 
    $('input[type=checkbox]').qtip(tipOptions); 
    $('input[type=radio]').qtip(tipOptions); 

    $('input[type=checkbox]').mouseover(function(){ 
     $('input[type=checkbox]').qtip('show'); 
    }); 
    $('input[type=checkbox]').mouseout(function(){ 
     $('input[type=checkbox]').qtip('hide'); 
    }); 

    $('input[type=radio]').mouseover(function(){ 
     $('input[type=radio]').qtip('show'); 
    }); 
    $('input[type=radio]').mouseout(function(){ 
     $('input[type=radio]').qtip('hide'); 
    }); 
}); 

演示在JS Fiddle Reference共享

更新 - 2016年12月23日

工作了Exa與單行中的qTip2匹配。

var tipOptions = { 
 
     content: 'Some basic content for the tooltip', 
 
     show: 'focus', 
 
     hide: { 
 
     when: { 
 
      event: 'unfocus' 
 
     } 
 
     } 
 
    }; 
 

 
    $('input').qtip(tipOptions); 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css" /> 
 

 
<fieldset> 
 
    <legend>Validating a complete form</legend> 
 
    <p> 
 
    <label for="firstname">Firstname</label> 
 
    <input type="text" class="show-tip" message="This is Firstname Field" name="firstname" id="firstname"> 
 
    </p> 
 
    <p> 
 
    <label for="password">Password</label> 
 
    <input type="password" name="password" id="password"> 
 
    </p> 
 
    <p> 
 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email"> 
 
    </p> 
 
    <p> 
 
    <label for="agree">Please agree to our policy</label> 
 
    <input type="checkbox" name="agree" id="agree" class="checkbox"> 
 
    </p> 
 
    <p> 
 
    <label for="newsletter">I'd like to receive the newsletter</label> 
 
    <input type="radio" name="gender" id="male" class="radio"> 
 
    </p> 
 
    <p> 
 
    <input type="submit" value="Submit" class="submit"> 
 
    </p> 
 
</fieldset>

+0

我加在身上的標籤: 焦點的時候= '返回false' 現在所有的qtip的是展示和隱藏正常。 它是真相還是我採取的上述行動解決問題? – Eitan

+0

恩,謝謝。 我會檢查一下。 – Eitan

+0

@Eitan:這是爲你工作的 –