Quill默认工具栏没有提示信息，在playground有Tooltip的实现例子，是基于BootStrap的Tooltip实现的，但我们也可以用较少代码，手写一个Tooltip模块。
CSS实现
工具栏上的图标样式改为相对定位，再给每个图标加上属性tooltip，[tooltip]相对图标定位，再用伪元素编写小箭头和内容，就可以实现提示信息的效果。
index.js
import Quill from 'quill'
import {tooltips} from './tooltip-list.js'
class Tooltip {
constructor (quill) {
this.quill = quill
this.toolbar = quill.getModule('toolbar')
this.buttons = null
this.selectors = null
let toolbarElement = this.toolbar.container
if (toolbarElement) {
this.buttons = toolbarElement.querySelectorAll('button')
this.selectors = toolbarElement.querySelectorAll('.ql-picker')
for (let el of this.buttons) {
this.setTooltip(el)
}
for (let el of this.selectors) {
this.setTooltip(el)
}
}
}
setTooltip (el) {
let format = [].find.call(el.classList, (className) => {
return className.indexOf('ql-') === 0
}).replace('ql-', '')
let tip = ''
if (tooltips[format]) {
let tool = tooltips[format]
if (typeof tool === 'string') {
tip = tool
} else {
let value = el.value || ''
if (value != null && tool[value]) {
tip = tool[value]
}
}
}
Object.assign(el.style, {
'position': 'relative'
})
el.setAttribute('tooltip', tip)
}
}
Quill.register('modules/tooltip', Tooltip)
tooltip.css (参考pure-css-tooltips)
.ql-toolbar [tooltip]{
position:relative;
}
.ql-toolbar [tooltip]::before{
content: "";
position: absolute;
top:-4px;
left:50%;
transform: translateX(-50%);
border-width: 4px 6px 0 6px;
border-style: solid;
border-color: rgba(0,0,0,0.7) transparent transparent transparent;
z-index: 99;
opacity:0;
}
.ql-toolbar [tooltip-position='left']::before{
left:0%;
top:50%;
margin-left:-12px;
transform:translatey(-50%) rotate(-90deg)
}
.ql-toolbar [tooltip-position='top']::before{
left:50%;
}
.ql-toolbar [tooltip-position='bottom']::before{
top:100%;
margin-top:8px;
transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
.ql-toolbar [tooltip-position='right']::before{
left:100%;
top:50%;
margin-left:1px;
transform:translatey(-50%) rotate(90deg)
}
.ql-toolbar [tooltip]::after {
content: attr(tooltip);
position: absolute;
left:50%;
top:-4px;
transform: translateX(-50%) translateY(-100%);
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
padding:4px 2px;
font-size: 12px;
min-width: 70px;
border-radius: 5px;
pointer-events: none;
padding: 4px 4px;
z-index:99;
opacity:0;
}
.ql-toolbar [tooltip-position='left']::after{
left:0%;
top:50%;
margin-left:-8px;
transform: translateX(-100%) translateY(-50%);
}
.ql-toolbar [tooltip-position='top']::after{
left:50%;
}
.ql-toolbar [tooltip-position='bottom']::after{
top:100%;
margin-top:8px;
transform: translateX(-50%) translateY(0%);
}
.ql-toolbar [tooltip-position='right']::after{
left:100%;
top:50%;
margin-left:8px;
transform: translateX(0%) translateY(-50%);
}
.ql-toolbar [tooltip]:hover::after,.ql-toolbar [tooltip]:hover::before {
opacity:1
}
.quill-tooltip::before{
content: "";
position: absolute;
bottom:-4px;
left:50%;
transform: translateX(-50%);
border-width: 4px 6px 0 6px;
border-style: solid;
border-color: rgba(0,0,0,0.7) transparent transparent transparent;
z-index: 99;
}
JS实现
JS实现较为麻烦，需要创建tooltip元素，append到body上，监听mouseenter和mouseleave，显示或隐藏tooltip。但因为是相对body定位，这样的tooltip避免了被页面上其他元素遮挡的问题。
另外，滚动时会出现tooltip跟随鼠标滚动的情况，这时需要获取工具栏所在的可滚动父元素。在其滚动时，隐藏tooltip。
import Quill from 'quill'
import {tooltips} from './tooltip-list.js'
import {getScrollParent} from 'utils/scrollInfo.js'
const tooltipStyles = {
minWidth: '70px',
position: 'absolute',
padding: '4px 8px',
textAlign: 'center',
backgroundColor: 'rgba(0,0,0,0.7)',
color: '#fff',
cursor: 'default',
borderRadius: '4px',
fontSize: '12px',
top: '-9999px',
visibility: 'hidden'
}
class Tooltip {
constructor (quill) {
this.quill = quill
this.toolbar = quill.getModule('toolbar')
this.buttons = null
this.selectors = null
this.tip = null
this.timeout = null
this.mouseenterHandler = null
this.mouseleaveHandler = null
let toolbarElement = this.toolbar.container
if (toolbarElement) {
// 添加处理事件
this.buttons = toolbarElement.querySelectorAll('button')
this.selectors = toolbarElement.querySelectorAll('.ql-picker')
for (let el of this.buttons) {
this.addHandler(el)
}
for (let el of this.selectors) {
this.addHandler(el)
}
// 创建tooltip
this.createTooltip()
// 滚动元素增加handler
this.scrollElm = getScrollParent(toolbarElement)
this.scrollElm.addEventListener('scroll', this.mouseleaveHandler)
}
}
createTooltip () {
this.tip = document.createElement('div')
this.tip.classList.add('quill-tooltip')
Object.assign(this.tip.style, tooltipStyles)
document.body.appendChild(this.tip)
}
addHandler (el) {
this.mouseenterHandler = () => {
this.timeout = setTimeout(() => {
this.showTooltip(el)
}, 100)
}
this.mouseleaveHandler = () => {
if (this.timeout) clearTimeout(this.timeout)
this.hideTooltip()
}
el.addEventListener('mouseenter', this.mouseenterHandler)
el.addEventListener('mouseleave', this.mouseleaveHandler)
}
showTooltip (el) {
// let format = el.className.replace('ql-', '')
let format = [].find.call(el.classList, (className) => {
return className.indexOf('ql-') === 0
}).replace('ql-', '')
if (tooltips[format]) {
let tool = tooltips[format]
if (typeof tool === 'string') {
this.tip.textContent = tool
} else {
let value = el.value || ''
if (value != null && tool[value]) {
this.tip.textContent = tool[value]
}
}
const elRect = el.getBoundingClientRect()
const tipRect = this.tip.getBoundingClientRect()
const body = document.documentElement || document.body
const bodyRect = {
width: body.scrollWidth,
height: body.scrollHeight,
scrollTop: body.scrollTop,
scrollLeft: body.scrollLeft
}
const offset = 3
Object.assign(this.tip.style, {
'top': elRect.top - elRect.height - offset + bodyRect.scrollTop + 'px',
'left': elRect.left - (tipRect.width - elRect.width) / 2 + bodyRect.scrollLeft + 'px',
'visibility': 'visible'
})
}
}
hideTooltip () {
Object.assign(this.tip.style, {
top: '-9999px',
visibility: 'hidden'
})
}
onDestroy () {
console.warn('ondestroy')
this.destroyTooltip()
if (this.buttons) {
for (let el of this.buttons) {
this.removeHandler(el)
}
}
if (this.selectors) {
for (let el of this.selectors) {
this.removeHandler(el)
}
}
if (this.scrollElm) this.scrollElm.removeEventListener('scroll', this.mouseleaveHandler)
}
destroyTooltip () {
if (this.tip.parentNode) this.tip.parentNode.removeChild(this.tip)
}
removeHandler (el) {
el.removeEventListener('mouseenter', this.mouseenterHandler)
el.removeEventListener('mouseleave', this.mouseleaveHandler)
}
}
Quill.register('modules/tooltip', Tooltip)
获取滚动父元素的代码如下（来自ElementUI）:
export const getScrollParent = function (element) {
var parent = element.parentNode
if (!parent) {
return element
}
if (parent === document) {
if (document.body.scrollTop !== undefined) {
return document.body
} else {
return document.documentElement
}
}
if (
['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 ||
['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 ||
['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1
) {
return parent
}
return getScrollParent(element.parentNode)
}
export const getStyleComputedProperty = function (element, property) {
var css = window.getComputedStyle(element, null)
return css[property]
}
Tooltip中的文本
文本通过获取图标的className来确定，如果是纯字符串，则直接用tooltips对象查找tooltips[format]，如果还有一层，则根据其value进一步查找。
let format = [].find.call(el.classList, (className) => {
return className.indexOf('ql-') === 0
}).replace('ql-', '')
if (tooltips[format]) {
let tool = tooltips[format]
if (typeof tool === 'string') {
this.tip.textContent = tool
} else {
let value = el.value || ''
if (value != null && tool[value]) {
this.tip.textContent = tool[value]
}
}
tooltips如下：
export const tooltips = {
'align': {
'': '对齐',
'center': '居中对齐',
'right': '右对齐',
'justify': '两端对齐'
},
'background': '背景色',
'blockquote': '引用',
'bold': '加粗',
'clean': '清除格式',
'code': '代码',
'code-block': '代码段',
'color': '颜色',
'direction': '方向',
'float': {
'center': '居中',
'full': '全浮动',
'left': '左浮动',
'right': '右浮动'
},
'formula': '公式',
'header': {
'': '标题',
'1': '标题1',
'2': '标题2'
},
'italic': '斜体',
'image': '图片',
'indent': {
'+1': '缩进',
'-1': '取消缩进'
},
'link': '链接',
'list': {
'ordered': '有序列表',
'bullet': '无序列表',
'check': '选择列表'
},
'script': {
'sub': '下标',
'super': '上标'
},
'strike': '删除线',
'underline': '下划线',
'video': '视频',
'undo': '撤销',
'redo': '重做',
'size': '字号',
'font': '字体',
'divider': '分割线',
'formatBrush': '格式刷',
'emoji': '表情'
}