bootstrap-4 - 页面外的工具提示显示无法正常工作。?
问题描述
使用按钮的工具提示,但显示在页面左侧。代码:-
<div class="pbutton"><a class="pr" data-animation="false" data-toggle="tooltip" title="Product" href="#"></a></div>
解决方案
使用工具提示,您需要在 data-toggle="tooltip" 旁边添加 data-placement="top, bottom, left or right"
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
推荐阅读
- javascript - React 组件道具的更改是否会导致重新渲染?
- c# - 剃刀页面排名
- php - PHP、ajax、HTML 表单上传文件到谷歌云存储
- signals - 不能在 OCTAVE 中进行 amdemod
- google-apps-script - Google 脚本 - 将值复制到新工作表中,已存在的值除外
- python - 匹配两个 .xlsx 文件中的唯一列,如果匹配更新,则使用 openpyxl 追加
- java - java中静态变量的混淆
- app-inventor - App Inventor 2 特殊字符,用于在加入文本时添加“空格”字符
- excel - Excel 将不同工作簿中的数据复制到 1 个工作簿中
- javascript - 在 Next.js 中模仿 react-router-dom 嵌套路由