javascript - Truncate Text - Show full text in Tooltip on mouseover - Stack Overflow

admin管理员组

文章数量:1356856

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

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

• javascript
• php
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited Jan 11, 2016 at 13:03 Ali Zia 3,87555 gold badges3333 silver badges8282 bronze badges asked Jan 11, 2016 at 12:02 Christoph C.Christoph C. 93844 gold badges2222 silver badges4141 bronze badges 1

• simply by using the html attribute title? – Yoplaboom Commented Jan 11, 2016 at 12:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

• 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()
})

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

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./bootstrap/bootstrap_ref_js_tooltip.asp

Try simple html tooltip using title.

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

本文标签： javascriptTruncate TextShow full text in Tooltip on mouseoverStack Overflow