Question

我有使用bootstrap3的MVC5应用程序，我想使用不像以下那样简单的标准的工具提示，我该怎么做？

  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="some text">Tooltip on left</button>

例如，我应该如何将工具提示背景更改为蓝色，将文本更改为白色？

Answer 1

使用以下方法自定义工具提示样式：

.custom-tooltip + .tooltip > .tooltip-inner {
  background-color: blue;
  }
.custom-tooltip + .tooltip > .tooltip-arrow {
  border-right-color:blue;
    }

将自定义类添加到触发器元素：

<button data-toggle="tooltip" data-placement="right" 
data-original-title="Tooltip on right" 
class="btn btn-default custom-tooltip">Blue Tootlip</button>

注意：要设置插入符颜色的样式（我假设你想要），你需要确保样式仅相应的border-direction-color:blue，否则会变得很奇怪。 / p>

以下是一个示例：http://www.bootply.com/dirAtPOnPa

Answer 2

要使用Bootstrap工具提示您没有设置“title”属性，请设置“tooltip”：

<button type="button" class="btn btn-default" data-toggle="tooltip" 
    data-tooltip-placement="left" 
    data-tooltip="some text">Tooltip on left</button>

使用不是标准的工具提示

2 个答案: