輸入文字工具提示不顯示

我要爲頁面中的輸入文字添加工具提示，此頁面有自己的CSS！我的代碼在本地機器上工作，但是當我粘貼該頁面上的代碼時，它不起作用，似乎在頁面上有衝突，但我已經找不到問題了。輸入文字工具提示不顯示

js的是：

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<script> 
    // execute your scripts when the DOM is ready. this is a good habit 
    $(function() { 

     // select all desired input fields and attach tooltips to them 
     $("#myform :input").tooltip({ 

     // place tooltip on the right edge 
     position: "center right", 

     // a little tweaking of the position 
     offset: [-2, 10], 

     // use the built-in fadeIn/fadeOut effect 
     effect: "fade", 

     }); 
    }); 
</script>

的CSS是：

#myform { 
    } 
    .tooltip{ 

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
    background-color: #fff; 
    border: 1px solid; 
    position: absolute; 
    border-color: #bbb #bbb #a8a8a8; 
    padding: 16px; 
    width: 255px; 
    line-height: 17px; 
    opacity: 0; 
    left: 16px; 
    top: 48px; 
    -webkit-transition: all 0.218s; 
    -moz-transition: all 0.218s; 
    -o-transition: all 0.218s; 
    transition: all 0.218s; 
    }

和代碼是：

<form id="myform" action="#"> 
    <!-- username --> 
    <label for="username">Username</label> 
    <input id="username" title="Must be at least 8 characters."/> 
</form>

和下方是頁面的當前輸入的CSS：

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
textarea:focus { 
    color: #000; 
    font-size: 1.4rem; 
    font-size: 14px; 
} 
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="search"] { 
    padding: 8px 10px 8px 46px; 
    width: 83%; 
}

來源

2014-01-17 user3067592

您可以通過添加自己的.tooltip樣式來覆蓋樣式，並使用！important重寫每種樣式。爲.tooltip中的每種風格執行此操作。希望這個幫助。這裏是一個簡單的JSFiddle example。

.tooltip{ 
    background-color:red !important; 
}

來源

2014-01-17 20:15:56 user3123529

我相信有一個JS問題，它不適用於！important。。 – user3067592

我發現這個問題，我的CSS中有另一個類叫做tooltip，我不能改變這個名字，但是當我在我的JS中更改工具提示名稱時，也是css代碼不再工作。 – user3067592

輸入文字工具提示不顯示

回答

相關問題