CODEWITHSUNDEEP
javascriptjquerycss
Jacqui
Jacqui

Reputation: 79

Styling a specific data-title-original

I have a range of tooltips that were set up using PHP so that you can upload an image and then customise the tooltip information as you please.

All the tooltips are one size, but I'd like to set a specific size for one specific tooltip. I can't add a class to it because all the tooltips are set up using a PHP script.

I tried this css but it's not working:

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

Is there some jquery that can help me achieve this?

Here's the 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>

Upvotes: 2

Views: 3261

Answers (2)

kapantzak
kapantzak

Reputation: 11750

First, there is no data-original-title attribute in the HTML, second, there is no tooltips class in the HTML.

Let's assume this HTML structure:

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

CSS

You do must remove the space before .tooltips to select all the elements that have this class and the specified attribute:

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

Upvotes: 0

A. Denis
A. Denis

Reputation: 562

Your CSS

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

looks ok, maybe there is wrong select rule? For example, no need in space before .tooltips...

You also can add class via javascript (don't forget do it when document ready)

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

Upvotes: 1

Related Questions