截斷文本-鼠標懸停在工具提示中顯示全文

Question

當前，我使用以下代碼從數據庫中輸出文本：

if ($data["own_subject"][$x]!="") { <td><p>".$data["own_subject"][0]."</p></td> }

我發現一個JS函數僅顯示前10個字符，一旦有人將鼠標懸停在該文本上，就會顯示整個文本。 此函數適用於以下代碼，並且工作正常：

<script>
    var lengthText = 10;
    var text = $('p').text();
    var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

    $('p').text(shortText);

    $('p').hover(function () {
        $(this).text(text);
    }, function () {
        $(this).text(shortText);
    });
</script>

現在，我不喜歡結果的樣式，而是想以某種工具提示來顯示全文。 我正在使用引導程序，並且引導程序具有此功能。 我的問題是，現在我不知道如何更改我的JS代碼以在工具提示中顯示完整長度的文本。 有人可以幫助我並向我展示如何更改當前代碼嗎？

非常感謝您的幫助。

謝謝克里斯

Answer 1

• 希望將您的原始text添加到p標簽的title屬性中。
• 將data-toggle="tooltip" data-placement="top"屬性添加到p標簽

防爆

<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>

• 作為$('[data-toggle="tooltip"]').tooltip()初始化現在，您還可以刪除$('p').hover事件。

防爆

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Answer 2

嘗試使用標題的簡單html工具提示。

if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }

Answer 3

您可以在元素中添加帶有真實文本的title屬性，並在該元素上調用bootstraps tooltip init，還需要從腳本中刪除當前的hover處理程序

$('p').text(shortText);
// Add title with real text to your element
$('p').attr('title', text);

// And all in document ready bootstrap tooltip init for your short text tags
$( document ).ready(function() {
    $('p').tooltip();
});

在此處查看有關Boostrap收費提示的更多信息： http : //www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

Answer 4

您可以使用引導程序的工具提示來執行此操作

   <button id="test" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"> 

底部的工具提示

$(function() { 
   var lengthText = 10;
   var text = $('#test').text();
   var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";

   $('#test').prop("title", text);
   $('#test').text(shortText);

   $('[data-toggle="tooltip"]').tooltip();
})

http://plnkr.co/edit/5hHRjULpDlMP3cYhHhU4?p=preview