如何在jQueryUI中斷行工具提示

新版本的jQueryUI（1.9）附帶了原生工具提示窗口小部件。經過測試後，如果內容（標題屬性的值）很短，它就可以正常工作。但是如果內容很長，一旦顯示，工具提示將重疊輸入文本。如何在jQueryUI中斷行工具提示

~~在官方網站有 a demo。~~

當你將鼠標光標移到您的年齡文本<input>，工具提示顯示重疊文本輸入。我不確定這是否是小部件的理想行爲。我希望它保持在文本輸入的右側，並在必要時斷行。

編輯：演示頁面不再顯示原來的問題，因爲演示已更新爲使用jQueryUI的V1.10其中位置代碼進行了更新，更好的地方，工具提示 - 請參見http://api.jqueryui.com/tooltip/#option-position

我重新創建了一個demo of the original problem on jsFiddle。

來源

2012-10-25 woraphol.j

用的jsfiddle演示更新，因爲官方演示不再顯示最新版本的jQuery的問題。還更新了我的答案，如何添加換行符。 – andyb

+1包含jsFiddle演示 – Mir

工具提示的placement由jQueryUI的位置對象控制，默認設置是：

{ my: "left+15 center", at: "right center", collision: "flipfit" }

的Position對象，尤其是collision屬性可以改變強制控制其他地方的位置。工具提示的默認設置是flipfit這意味着如果默認（在右邊）不適合它將翻轉到左邊，並嘗試該位置，如果不與任何東西碰撞，請嘗試合適通過將其從窗口邊緣移開來進行控制。結果是它現在與<input>相沖突。似乎沒有辦法強制一個很長的工具提示來巧妙地包裝。

但是有兩種方法來包裝內容：

添加自定義CSS類的配置與max-width迫使包裝，例如：

的JavaScript

$('input').tooltip({ 
    tooltipClass:'tooltip' 
});

CSS

.tooltip { 
    max-width:256px; 
}

或插入硬線條AKS <br/>在title屬性，例如

title="Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit"

編輯：所以看起來（根據the changelog）像jQueryUI的變化V1.9和1.10之間的提示內容選項。僅供參考這裏的區別是：

v1.9.2的

content: function() { 
    return $(this).attr("title"); 
}

V1。10

content: function() { 
    // support: IE<9, Opera in jQuery <1.7 
    // .text() can't accept undefined, so coerce to a string 
    var title = $(this).attr("title") || ""; 
    // Escape title, since we're going from an attribute to raw HTML 
    return $("<a>").text(title).html(); 
}

所以，你可以放回到舊的功能，不使用.tooltip()這樣逃避的標題屬性<br/>標籤：

$('input').tooltip({ 
    content: function() { 
     return $(this).attr('title'); 
    } 
});

此外，請參閱jsFiddle demo。

來源

2012-10-25 12:45:57 andyb

插入
不適用於我。 – drolex

您使用的是哪個版本的jQueryUI？ – andyb

它與[
]在[**本演示**]（http://jsfiddle.net/grJxQ/）中使用jQuery v1.9.1和jQueryUI v1.9.2 – andyb

這工作：

HTML

<div class="produtos"> 
    <div class="produtos_imagem"> 
     <img src="imagens/teste/7.jpg" width="200" title="Código: 00122124<br /><br />Descrição: AB PNEU 700 X 23 FOLD CORPRO<br /><br />Unidade: PN<br /><br />Marca : PNEU"/> 
    </div> 
    <p class="produtos_titulo">AB PNEU 700 X 23 FOLD CORPRO</p> 
</div>

的JavaScript

$(document).tooltip({ 
    content: function() { 
     var element = $(this); 
     if (element.is("[title]")) { 
      return element.attr("title"); 
     } 
    }, 
    position: { 
     my: "center bottom-20", 
     at: "center top" 
    } 
});

來源

2013-04-15 21:13:22 Taru

這是我的絕招與最新的jQuery做/ jQueryUI的

這是assum所有你想擁有工具提示的項目都有'jqtooltip'類，它們有標題標籤，標題有一個用於行分隔符的管道字符。

$('.jqtooltip').tooltip({ 
    content: function(callback) { 
    callback($(this).prop('title').replace('|', '<br />')); 
    } 
});

來源

2013-04-18 20:40:20 ScottRFrost

這是一個好主意，我將不得不嘗試它來加載我的圖片。 – Sydwell

要替換不僅僅是第一個|，請使用'replace（/ \ |/g，'
'）' – djb

這對我在jQuery UI 1.11.3上的工作，謝謝！ – KaHa6uc

我有一個jQuery 2.1.1的解決方案，類似於@ Taru的解決方案。

基本上，我們必須使用工具提示的內容調用來動態地從元素中獲取數據。元素本身可以有任何html標記。請注意，您需要導入

所以，onload事件，我這樣做：

$(function() { 
    $(document).tooltip({ 
     content:function(){ 
     return this.getAttribute("title"); 
     } 
    }); 
    });

而且我的例子元素是這樣的：

<div title="first<br/>second<br/>">hover me</div>

來源

2014-09-13 04:11:54 Manbroski

這也適用於v1.11.1 –

適用於JQuery UI'v1.11.4'和JQuery'v1.10.2' – Neo

適用於JQuery UI 1.11.3和JQuery 2.1.3 - 最好的解決方案！ – Hunv

如何在jQueryUI中斷行工具提示

回答

相關問題