javascript - Tippy.js custom theme not being applied - Stack Overflow

admin管理员组

文章数量:1306850

I want to change the style of a tooltip (from tippy.js) and am doing exactly as being told in the docs here:

Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato:

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
To apply the theme, specify a theme prop without the -theme suffix:

tippy('button', {
  theme: 'tomato',
});

But for some reason my tooltip stays the default color, why?

I added this style:

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
.infosvg {
  width: 20px;
}

tooltippy {
  position: absolute;
  top: 150px;
  left: 300px;
}
 

My html

<span class="tooltippy">
    <img class="infosvg" src="assets/images/custom/icon_info.svg">
    <div class="tooltipcontent darktext">Test</div>
</span>

My js:

$( ".tooltippy" ).each(function( i ) {
    tippy(this, {
      trigger: 'click',
      allowHTML: true,
      placement: 'right',
      animation: 'scale-subtle',
      interactive: true,
      theme: 'tomato',
      content: function (reference) {
        return reference.querySelector('.tooltipcontent');
      }
    });
});

What is going wrong? I've tried different colors in hex or in text like above but it stays the default tooltip.

I want to change the style of a tooltip (from tippy.js) and am doing exactly as being told in the docs here:

Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato:

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
To apply the theme, specify a theme prop without the -theme suffix:

tippy('button', {
  theme: 'tomato',
});

But for some reason my tooltip stays the default color, why?

I added this style:

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}
.infosvg {
  width: 20px;
}

tooltippy {
  position: absolute;
  top: 150px;
  left: 300px;
}
 

My html

<span class="tooltippy">
    <img class="infosvg" src="assets/images/custom/icon_info.svg">
    <div class="tooltipcontent darktext">Test</div>
</span>

My js:

$( ".tooltippy" ).each(function( i ) {
    tippy(this, {
      trigger: 'click',
      allowHTML: true,
      placement: 'right',
      animation: 'scale-subtle',
      interactive: true,
      theme: 'tomato',
      content: function (reference) {
        return reference.querySelector('.tooltipcontent');
      }
    });
});

What is going wrong? I've tried different colors in hex or in text like above but it stays the default tooltip.

• javascript
• jquery

Share Improve this question Follow asked Dec 23, 2020 at 15:04 twantwan 2,6591212 gold badges4242 silver badges115115 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

According to the documentation you need to change this line:

.tippy-tooltip.tomato-theme {

to:

.tippy-box[data-theme~='tomato'] {

And, in order to add the style to the arrow you need also:

.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {

The snippet:

$( ".tooltippy" ).each(function( i ) {
    tippy(this, {
        trigger: 'click',
        allowHTML: true,
        placement: 'right',
        animation: 'scale-subtle',
        interactive: true,
        theme: 'tomato',
        content: function (reference) {
            return reference.querySelector('.tooltipcontent');
        }
    });
});

.tippy-box[data-theme~='tomato'] {
  background-color: tomato;
  color: yellow;
}
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: tomato;
}
.infosvg {
  width: 20px;
}

.tooltippy {
  position: relative;
  top: 150px;
  left: 300px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg./@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg./tippy.js@6/dist/tippy-bundle.umd.js"></script>


<div>
  <span class="tooltippy">
      <img class="infosvg" src="https://upload.wikimedia/wikipedia/mons/e/e4/Infobox_info_icon.svg">
      <div class="tooltipcontent darktext">Test</div>
  </span>
</div>

本文标签： javascriptTippyjs custom theme not being appliedStack Overflow