截断文本-鼠标悬停时在工具提示中显示全文
Truncate Text - Show full text in Tooltip on mouseover
当前我从数据库中输出一个文本,代码如下:
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代码,以便在工具提示中显示完整的文本。有人能帮我看看我需要如何更改当前代码吗?
我真的很感谢你的任何帮助。
谢谢,Chris
- 在
p
标签的title属性中添加您原来的text
,我希望您已经在做了 - 将
data-toggle="tooltip" data-placement="top"
属性添加到p
标记
Ex
<p data-toggle="tooltip" data-placement="top" title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p>
- 以
$('[data-toggle="tooltip"]').tooltip()
的身份启动。您现在还可以删除$('p').hover
事件
Ex
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
您可以使用引导的工具提示来完成此操作
<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
使用title尝试简单的html工具提示。
if ($data["own_subject"][$x]!="") { <td><p title='".$data["own_subject"][0]."'>".$data["own_subject"][0]."</p></td> }
您可以将带有实际文本的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();
});
点击此处查看更多关于boosrap收费提示的信息:http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp
相关文章:
- 悬停工具提示显示详细信息 jquery
- 如何使高图工具提示显示在饼图之外
- 如何使用JS或JQuery使工具提示显示在TD悬停上
- 如何使用 d3.js 使工具提示显示在饼图扇区附近
- 如何通过 Jquery 工具提示显示图像
- 使高图工具提示显示最靠近左侧的点的信息(即在中点不更改)
- 有没有办法强制工具提示显示在输入元素的特定位置
- 高图表工具提示显示额外数据
- 在页面加载时自动对焦 dx文本框 并将 dx工具提示显示为验证消息
- 工具提示显示在第二次悬停之后
- 如何使工具提示显示在每个图像旁边
- 如何确定ng-grid中用于工具提示显示的行索引
- Imagemap:让点击区域的工具提示显示在鼠标窗口上
- 工具提示显示在随机位置
- 显示图工具提示显示x轴的最后日期值,而不是当前值
- 如何防止默认的工具提示显示在svg元素上
- twitter引导工具提示显示在modal后面
- ASP.NET 资源 resx 字符串工具提示显示帮助
- 引导工具提示显示在模态窗口后面
- 浮动工具提示显示在线形图上,而不是条形图上