在bootstrap table中使用Tooltip

Love The Way You Lie 2021-09-12 04:50 768阅读 0赞

//偏好主题
    			function preferenceFormatter(value, row, index) {
    				var nameString = "";
    				if (value.length > 6) {
    					nameString = value.substring(0,6) + '...';
    				} else{
    					nameString = value;
    				}
    				return [
    					'<a href="#" data-toggle="tooltip" title='+ value +'>' + nameString +'</a>',
    				].join('');
    			}

## 用法 ##

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

*  **通过 data 属性**：如需添加一个提示工具（tooltip），只需向一个锚标签添加 **data-toggle="tooltip"** 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。
    
        <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
 *  **通过 JavaScript**：通过 JavaScript 触发提示工具（tooltip）：
    
        $('#identifier').tooltip(options)

> ![quote.png][]提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：
> 
>     $(function () {
>          $("[data-toggle='tooltip']").tooltip(); });

[quote.png]: /images/20210813/660457507d07426480233881a241b5ca.png

发表评论取消回复

表情：

评论列表（有 0 条评论，768人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap-table使用

Bootstrap-table的基本使用这是一款很好的前端分页和表格显示的插件官方地址：[https://bootstrap-table.com/][https_

梦里梦外;/ 2022年10月02日 04:50/ 0 赞/ 226 阅读

相关 bootstrap table使用小记

bootstrap table是一个非常不错的，基于bootstrap的插件，它扩展和丰富了bootstrap表格的操作，如格式化表格，表格选择器，表格工具栏，分页等等。最

待我称王封你为后i/ 2022年08月08日 17:50/ 0 赞/ 170 阅读

相关 bootstrap table使用总结

> 使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：因为之前在官网也找了

墨蓝/ 2022年07月13日 12:22/ 0 赞/ 295 阅读

相关 Bootstrap-table使用教程

-------------------- 前言我们先从Bootstrap-table（以下简称BS-table）的基础使用开始讲起，写法来说，BS-table主要分为

女爷i/ 2022年05月20日 03:12/ 0 赞/ 271 阅读

相关 Bootstrap-table使用小结

1.首先，先上全部配置： $tomcatBootstrapTable = $("connectionInstances").bootstrapTable({ //

淩亂°似流年/ 2022年05月14日 12:19/ 0 赞/ 186 阅读

相关使用bootstrap Table

bootstrap Table是一个基于ajax异步获取数据的插件可以实现查询分页等多种功能本文博主将从零开始，一步一步的告诉大家如何在前端用bootstrap Tab

落日映苍穹つ/ 2022年03月26日 13:06/ 0 赞/ 909 阅读

相关 iview在Table表格中渲染Tooltip文字提示，使用render实现

{ title: '发送范围', key: 'sendRangeName', min

小灰灰/ 2022年01月14日 12:25/ 0 赞/ 1074 阅读

相关 bootstrap table 初始化中在columns中截取字符串

在columns下有field 截图代码如下 columns:[[ {filed:"Bainily",align: "center",width:"

╰+攻爆jí腚メ/ 2021年11月11日 07:52/ 0 赞/ 368 阅读

相关 bootstrap-table中使用bootstrap-switch开关按钮

先上图 ![867526-20190716151143310-1275608575.png][] 准备工作：添加css和js文件 bootstrap开关按钮}

超、凢脫俗/ 2021年11月06日 00:31/ 0 赞/ 863 阅读

相关在bootstrap table中使用Tooltip

//偏好主题 function preferenceFormatter(value, row, index) { var nameStri

Love The Way You Lie/ 2021年09月12日 04:50/ 0 赞/ 769 阅读