Question

我通过在CSS中创建其他类来修改Bootstrap 3工具提示，以通过组合类来补充它们。

我已经创建了对彩色工具提示的支持，遵循基本样式（成功，危险，警告，信息和主要），但现在我不能对尺寸做同样的事情。

使用Firefox Inspector，在学习如何避免创建的元素消失（讨厌）之后，我已经呈现了HTML：

<span data-original-title="File already exists" title="" class="glyphicon tooltip-danger glyphicon-remove tooltip-lg"></span>
<div style="top: 42.5px; left: 70px; display: block;" id="tooltip821719" class="tooltip fade top in" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">
        File already exists
    </div>
</div>

＆lt; span＆gt; 在JavaScript中创建：

var icon = $( '<span/>' ).addClass( 'glyphicon' ).data( 'toggle', 'tooltip' );

    icon.addClass( 'tooltip-danger' )
        .addClass( 'glyphicon-remove' )
        .addClass( 'tooltip-lg' )
        .prop( 'title', file.error )
        .tooltip();

班级 tooltip-danger 是我提到的着色类之一。在此，它负责制作工具提示 red-ish （仅限背景和边框）。

我的目标是 tooltip-lg ，从理论上讲，它应该允许我控制尺寸。

我不是CSS方面的专家，但我认为这个定义是：

.tooltip-lg .tooltip-inner {
  /** styles from btn-lg */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

足够风格，但它没有按预期工作。我知道这是可能的，但我不知道如何。

Answer 1

这只是对结果HTML进行分析的一个问题。

我使用的是选择器，但 .tooltip-inner 类的元素 元素 .tooltip-LG 即可。它位于另一个元素中，与我定义的元素相同（ .tooltip ）。

所以不要使用：

.tooltip-lg .tooltip-inner {}

我用过：

.tooltip-lg + .tooltip .tooltip-inner {}

它有效。：d

我现在已经创建了五个不同大小的五个类，我认为这些类与他们的名字非常成正比。如果有人也需要这样的话，我会把它们留在这里：

.tooltip-x-sm + .tooltip .tooltip-inner, .tooltip-sm + .tooltip .tooltip-inner, .tooltip-md + .tooltip .tooltip-inner, .tooltip-lg + .tooltip .tooltip-inner, .tooltip-x-lg + .tooltip .tooltip-inner { font-size: 18px; line-height: 1.33; } .tooltip-x-sm + .tooltip .tooltip-inner { padding: 5px 10px; border-radius: 3px; width: 250px; max-width: 250px; } .tooltip-sm + .tooltip .tooltip-inner { padding: 6px 12px; border-radius: 4px; width: 300px; max-width: 300px; } .tooltip-md + .tooltip .tooltip-inner { padding: 7px 14px; border-radius: 5px; width: 350px; max-width: 350px; } .tooltip-lg + .tooltip .tooltip-inner { padding: 8px 16px; border-radius: 6px; width: 400px; max-width: 400px; } .tooltip-x-lg + .tooltip .tooltip-inner { padding: 9px 18px; border-radius: 7px; width: 640px; max-width: 640px; }

用于不同工具提示大小的类

1 个答案: