Popper-core: .tooltip doesn`t change opacity on hover

Created on 4 May 2018  路  2Comments  路  Source: popperjs/popper-core

Can`t make plugin work because on hover .tooltip is still opacity: 0

I use webpack

yarn.lock
tooltip.js@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/tooltip.js/-/tooltip.js-1.2.0.tgz#8b16482f04397f4f9d7387843dccf186890c8860" dependencies: popper.js "^1.0.2"

tooltip.js

import Tooltip from 'tooltip.js'
$( () => {
  const $element = $('.js-tooltip')
  const title = $element.data('text')

  const tooltip = new Tooltip($element[0], {title, trigger: 'hover', placement: 'top'})
  tooltip.show())
})

Most helpful comment

hello @Krasnov8953
are you using bootstrap? IMHO the issue is here because 'show' class is missing

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_tooltip.scss#L13

opacity stay to 0 value ever.

  opacity: 0;

  &.show { opacity: $tooltip-opacity; }

you can override with a rule like this (using sass):

.tooltip[aria-hidden=false] {
  opacity: $tooltip-opacity;
}

or like this (without sass):

.tooltip[aria-hidden=false] {
  opacity: 1;
}

All 2 comments

Thank you for your issue.

Unfortunately I can't answer to all the reported issues without a little help from you.
Please, make sure to follow the issues template when you submit a new issue, in this way I will already have all the informations needed to understand the problem and help you with it.

I'm closing this issue for now, but feel free to open a new one making sure to follow all the instructions!

Thank you for your understanding.

hello @Krasnov8953
are you using bootstrap? IMHO the issue is here because 'show' class is missing

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_tooltip.scss#L13

opacity stay to 0 value ever.

  opacity: 0;

  &.show { opacity: $tooltip-opacity; }

you can override with a rule like this (using sass):

.tooltip[aria-hidden=false] {
  opacity: $tooltip-opacity;
}

or like this (without sass):

.tooltip[aria-hidden=false] {
  opacity: 1;
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

NilsEnevoldsen picture NilsEnevoldsen  路  5Comments

FezVrasta picture FezVrasta  路  3Comments

skitterm picture skitterm  路  5Comments

c0bra picture c0bra  路  5Comments

memboc picture memboc  路  3Comments