2015-09-11 55 views
0

我正在使用Tipped工具提示插件..因爲我以前使用的插件是ace admin pluginTipped但問題是它不根據窗口大小調整位置。功能是不是有.. 我越來越被我設置提示負荷和檢查情況,我試圖改變它之後,但它同時顯示提示主要問題工具提示不根據窗口大小

代碼:

var a=document.createElement('a'); 
a.setAttribute('id','23_34'); 
a.setAttribute('title', 'Transcription ID: '); 

if (data == true) { 
Tipped.remove("#23_45"); 
Tipped.create("#23_45", $('<p/>').html('Transcription ID: 
} 

,它顯示了兩個工具提示都不會刪除第一個..任何一個有解決方案或建議我根據窗口高度自動調整位置的任何工具提示?

+0

你的JS出現在第二殘缺最後一行補籃文件提及使用id或class selector..is –

+0

@OliverB有沒有更正? – Dhara

+0

這個位沒問題,但是看不到'$('

').html的末尾(''...字符串和函數沒有關閉,爲什麼你使用'if(data == true)'爲如果你想在頁面加載時發生綁定,最好把它全部放在'$(function(){...})裏面 –

回答

2

如果你不想使用工具提示任何插件,只是CSS這個答案可能會有所幫助。

HTML:

<a href="" class="tooltip_custom" data-title="text on hover"></a> 

CSS:

.tooltip_custom{ 
    display: inline; 
    position: relative; 
} 
.tooltip_custom:hover:after{ 
    background: #333; 
    background: rgba(0,0,0,.9); 
    border-radius: 5px; bottom: 26px; 
    color: #fff; font-size: 12.2px; 
    content: attr(data-title); 
    left: 113%; 
    bottom:-30%; 
    padding: 4px 7px; 
    position: absolute; 
    z-index: 500000000; 
    width: auto; 
} 
.tooltip_custom:hover:before{ 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 5px; 
    transform:rotate(90deg); 
    left: 100%; content: ""; 
    position: absolute; 
    z-index: 5000000001; } 
+0

這是一個很好的解決方案,無論如何它最好javascript中沒有語義內容 - 應該附加到DOM目標,並在需要使用JS工具提示時動態檢索。 –

+1

但它不會根據窗口調整其位置。主要問題是隻有 – Dhara

+0

@niravpatel我不想要使用任何插件..你的代碼是部分工作的..它可以根據窗口大小自動調整嗎?我也想在右側顯示工具提示..plz幫助我 – Dhara