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>

现在我不喜欢结果的风格，我想在某种工具提示中显示全文。我正在使用bootstrap和bootstrap有这个功能。我现在的问题是我不知道如何更改我的JS代码以在工具提示中显示全长文本。有人可以帮助我并告诉我如何更改当前的代码吗？

我真的很感激你的帮助。

谢谢，克里斯

Answer 1

在text标记的title属性中添加原始p，我希望您已经在这样做。
将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 tolltip的更多信息：http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

Answer 4

您可以使用bootstrap工具提示

来完成此操作

angular.module("app", []).component("component", {
  controller: ["$window", function($window) {
    var self = this;
    
    self.logg = function() {
      console.log("logging!");
    };
    
    $window.angularControllerLogg = self.logg;
  }
});
               
window.angularControllerLogg();

底部的工具提示

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

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

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

4 个答案: