html - 如何设置引导程序 4 的工具提示样式
问题描述
我正在尝试设计我的bootstrap 4 tool-tip
. 我想改变它的背景颜色、高度、宽度和边框。我没有找到任何方法来根据我的风格来设计它。
这是我的 HTML
<i class="fa fa-question-circle "href="#" data-toggle="tool-tip" title="Cover for any accidental loss or damage to the vehicle caused by natural calamities such as floods, storms, earthquakes, etc." aria-hidden="true"> </i>
工具提示工作正常,但我无法设置它的样式。
解决方案
查看以下具有不同样式的示例:
HTML:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Default">Default</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="primary" title="Primary">Primary</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="info" title="Info">Info</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="success" title="Success">Success</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="warning" title="Warning">Warning</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="danger" title="Danger">Danger</button>
CSS:
.tooltip.primary .tooltip-inner { background-color: #337ab7; }
.tooltip.primary.top > .tooltip-arrow { border-top-color: #337ab7; }
.tooltip.primary.right > .tooltip-arrow { border-right-color: #337ab7; }
.tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; }
.tooltip.primary.left > .tooltip-arrow { border-left-color: #337ab7; }
.tooltip.info .tooltip-inner { background-color: #31b0d5; }
.tooltip.info.top > .tooltip-arrow { border-top-color: #31b0d5; }
.tooltip.info.right > .tooltip-arrow { border-right-color: #31b0d5; }
.tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; }
.tooltip.info.left > .tooltip-arrow { border-left-color: #31b0d5; }
.tooltip.success .tooltip-inner { background-color: #449d44; }
.tooltip.success.top > .tooltip-arrow { border-top-color: #449d44; }
.tooltip.success.right > .tooltip-arrow { border-right-color: #449d44; }
.tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; }
.tooltip.success.left > .tooltip-arrow { border-left-color: #449d44; }
.tooltip.warning .tooltip-inner { background-color: #ec971f; }
.tooltip.warning.top > .tooltip-arrow { border-top-color: #ec971f; }
.tooltip.warning.right > .tooltip-arrow { border-right-color: #ec971f; }
.tooltip.warning.bottom > .tooltip-arrow { border-bottom-color: #ec971f; }
.tooltip.warning.left > .tooltip-arrow { border-left-color: #ec971f; }
.tooltip.danger .tooltip-inner { background-color: #d9534f; }
.tooltip.danger.top > .tooltip-arrow { border-top-color: #d9534f; }
.tooltip.danger.right > .tooltip-arrow { border-right-color: #d9534f; }
.tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; }
.tooltip.danger.left > .tooltip-arrow { border-left-color: #d9534f; }
这是完整的工作代码:
推荐阅读
- c# - 来自 OnTokenValidated 事件侦听器的 TokenValidatedContext 的安全令牌缺少最后一个字符串段
- python - 在 OpenCV 中裁剪垂直计数,获取边界框边框而不是区域
- iccube-reporting - IcCube - 模式重新加载后自动重新加载报告
- java - 我可以在资源服务器启动时禁用颁发者验证吗?
- r - 如果数据帧值是相应控制值的两倍,则更改数据帧值
- python - Django python项目1搜索wiki
- python - Keras to_categorical 输出的类别比实际标签多
- javascript - 静态站点的 Cookie:Cookie 将很快被拒绝(SameSite)问题
- ms-access-2016 - 从用户选项创建多个 SKU 的单一表单
- octobercms - 10 月 CMS 构建 467 问题,打开 cms 文件