截断文本-鼠标悬停在工具提示中显示全文

Question

Currently I output a text from my database with the following code:

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

I found a JS function to only show the first 10 characters and once someone does a mouseover the whole text appears. This function is working with the following code and it is working fine:

<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>

Now I do not like the style of the outcome and I would like to show the full text in some kind of a tooltip. I am using bootstrap and bootstrap has this function. My problem is now that I do not know how I need to change my JS code to show the full length text in a tooltip. Can someone help me out and show me how I need to change my current code?

I would really appreciate your any help.

Thanks, Chris

Answer 1

• Add your original text in title attribute of p tag which I hope you are already doing.
• Add data-toggle="tooltip" data-placement="top" attributes to p tag

Ex

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

• Initiate as $('[data-toggle="tooltip"]').tooltip() Also you can now remove $('p').hover event.

Ex

$(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

You can add title attribute with real text to you element and call bootstraps tooltip init over that elements, also you need to remove current hover handler from your script

$('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();
});

check more about boostrap tolltip here: http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

Answer 4

You can do this using tooltip of bootstrap

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

Tooltip on 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