插件工具提示 - Trunkate Title

时间:2014-06-21 10:03:23

标签: javascript jquery tooltipster

我正在使用插件“tooltipster”,但我想将标题截断为30个字符并添加hellips。

我有3个链接列表。 下面是代码并添加了一个示例链接

$('.tooltip').tooltipster({
    animation: 'fade',
    delay: 200,
    touchDevices: false,
    trigger: 'hover',
    position: 'bottom',
    theme: 'tooltipster-shadow'
});


$('.box a').each(function(){
    if ($(this).attr('title').text().length > 20) {
        $(this).attr('title').text($(this).text().substr(0, 17)); 
        $(this).attr('title').append(' ...');
    }

});

http://jsfiddle.net/rttUG/

非常感谢你!

1 个答案:

答案 0 :(得分:1)

  1. 您应该在dom准备就绪后执行脚本,使用$(document).ready(function(){})$(function(){})
  2. 要获取属性值,请使用$.attr('attribute')代替$.attr('attribute').text()
  3. 要更新属性值,请使用$.attr('attribute', 'new value')代替$.attr('attribute').text('new value')
  4. 您的新代码将如下所示:

    $(function(){
    
        $('.box a').each(function(){
            var title = $(this).attr('title');
            if (title.length > 20) {
                $(this).attr('title', title.substr(0, 17) + '...'); 
            }
        })
    
        $('.tooltip').tooltipster({
            animation: 'fade',
            delay: 200,
            touchDevices: false,
            trigger: 'hover',
            position: 'bottom',
            theme: 'tooltipster-shadow'
        });
    
    })
    

    http://jsfiddle.net/8vpUk/