Question

我有一系列使用PHP设置的工具提示，您可以上传图像，然后根据需要自定义工具提示信息。

所有工具提示都是一个尺寸，但我想为一个特定的工具提示设置一个特定的尺寸。我无法为其添加类，因为所有工具提示都是使用PHP脚本设置的。

我试过这个css，但它不起作用：

    a[data-original-title="SABS APPROVED"] .tooltips button {width: 60px !important;}

是否有一些jquery可以帮助我实现这个目标？

这是HTML：

     <div class="row tooltips-content">


                <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="SABS APPROVED">

                </a>




<div class="symbols">
<span class="tooltips " style="" title=""><button style="background-
image:url(http://javlin.unknowndesign.co.za/wp-
content/uploads/2017/06/SABS_APPROVED.svg);"></button></span>
</div>

Answer 1

你的CSS

a[data-original-title="SABS APPROVED"] .tooltips button {width: 60px !important;}

看起来不错，也许错误的选择规则？例如，在.tooltips之前不需要太空......

你也可以通过javascript添加课程（不要忘记在准备文件时这样做）

$('a[data-original-title="SABS APPROVED"]').addClass("my_special_tooltip");

Answer 2

首先，HTML中没有data-original-title属性，其次，HTML中没有tooltips类。

让我们假设这个HTML结构：

<div class="row tooltips-content">
  <a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="SABS APPROVED">
    <button>Button</button>
  </a>
</div>

<强> CSS

您必须删除.tooltips之前的空格，以选择具有此类和指定属性的所有元素：

a[data-original-title="SABS APPROVED"].tooltips button {width: 60px !important;}

设置特定数据标题原始样式

2 个答案: