Question

我正在使用Boostrap v3.0.2，我想制作工具提示，但要设计它有点不同。我想制作工具提示背景颜色为黑色，有小填充并定位在右边。

现在，它看起来像是：

我的代码如下：

Option Explicit
Sub main()
    Dim cell As Range, filtValuesRng As Range

    With Worksheets("Itemgruppen") '<--| reference worksheet "Sheet1"
        With .Range("A1").CurrentRegion '<-- reference its data set
            .AutoFilter 2, "Biologie" '<--| filter it on column 2 with        criteria="biology"
            If Application.WorksheetFunction.Subtotal(103, .Cells.Resize(, 1)) > 1 Then Set filtValuesRng = .Offset(1).Resize(.Rows.Count - 1, 1).SpecialCells(xlCellTypeVisible) '<--| if any value filtered then set them into a range
        End With
        '.AutoFilterMode = False '<--| show all rows back and remove filters
    End With

    If filtValuesRng Is Nothing Then Exit Sub '<--| if no values filtered from previous "Sheet1" column 2 filtering then exit

    With Worksheets("Itembloecke") '<--| reference worksheet "Sheet2"
        With .Range("A1").CurrentRegion '<-- reference its data set
            For Each cell In filtValuesRng '<--| iterate over "Sheet1" column filtered values
                .AutoFilter 1, cell.Value2 '<--| filter worksheet "Sheet2" dataset on column 1 with current "Sheet1" column filtered value
                If Application.WorksheetFunction.Subtotal(103, .Cells.Resize(, 1)) > 1 Then '<--| if any cell other than header ones has been filtered...
'                    .SpecialCells(xlCellTypeVisible)... '<--| do something with filtered cells
                End If
            Next
        End With
        '.AutoFilterMode = False '<--| show all rows back and remove filters
    End With
End Sub

    $(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
      });

   .tooltip .tooltip-inner {
        max-width: 200px;
        padding: 1px 3px;
        color: #fff;
        text-align: center;
        background-color: #000;
        border-radius: 3px;
    }

我试图以这种方式改变它，但没有改变：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
     
        <span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="top" title="Remove"></span>

Answer 1

这很好用，请参阅演示。

＆＃13;

$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

＆＃13;

.tooltip .tooltip-inner {
   
    max-width: 200px;
    padding: 1px 3px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 3px;
}

.remove-file {
  display: block;
  margin: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
 

    <span class="glyphicon glyphicon-remove remove-file" data-toggle="tooltip" data-placement="right" title="This is Working correctly"></span>

＆＃13;

Answer 2

首先，您需要将外部css文件放在bootstrap的css文件下面，然后覆盖默认的css，然后您只需要在类中进行颜色更改：

  .tooltip-inner{
     background:red;
    }

使用Bootstrap v3.0.2设置样式工具提示

2 个答案: