# Add Bootstrap Tooltips in django-tables2
Source: https://blog.ferstar.org/posts/bootstrap-tooltips/
最近用 Django 写一个内部项目，选用 [django-tables2](https://django-tables2.readthedocs.io/en/latest/) 做数据库表单页面展示非常方便，不过再方便，踩坑也是必不可少的。其中遇到的一个问题是有的列表内文字不能写太多，但需要给出比较详细的提示（鼠标悬停即显示详细提示内容）。虽然直接给加`title`就行，但原生效果略丑，我需要跟 Bootstrap 主题样式一致，所以需要额外的一点工作。
直接上解决方案：
```python
# samples/tables.py
import django_tables2 as tables
from .models import Sample
class SampleTable(tables.Table):
# 添加报告链接
# 这个链接是根据样本完成状态与否自动生成
# 加个data-toggle的属性，将title内容变成提示框
report = tables.TemplateColumn(
'{% if record.has_completed %}Result link {% else %}{% endif %}',
verbose_name='View Result', # 这个可以控制显示的列名，默认是数据库对应字段名
orderable=False) # 拒绝排序
class Meta:
model = Sample
fields = ('name', '...', 'report', '...') # 这里控制要显示的字段
template_name = 'django_tables2/bootstrap.html'
```
模板要加个自定义 js 的 block
```html
...
{% block js %}{% endblock %}
```
对应app(samples)的模板文件
```html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}我爱北京天安门{% endblock %}
{% load render_table from django_tables2 %}
{% block content %}
{% render_table table %}
{% endblock %}
{% block js %}
{% endblock %}
```
在当前app(samples)目录下新建`static/samples/js`目录，写入自定义js
```javascript
// samples/static/samples/js/index.js
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
})
```
效果如图：
咦，怎么还能加按钮？这个下回再说~