Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

calling any optionless method on element with no data-* attributes creates empty tooltip/popover object #15874

Closed
IanKemp opened this issue Feb 23, 2015 · 3 comments · Fixed by #15988
Labels
Milestone

Comments

@IanKemp
Copy link

IanKemp commented Feb 23, 2015

http://jsbin.com/cujijohutu/1/

Steps:

  1. Run attached JS Bin and hover over the link. Notice how the popup appears after ~1 second. Move mouse over/out the link multiple times and notice the popup always appears, as expected.
  2. Click the "Run with JS" button to reset the bin. Hover over the link and move the mouse cursor away before the timeout has elapsed. Move mouse over/out the link multiple times and notice that the popup never appears - unexpected/erroneous.
  3. Edit the JavaScript code in the bin and uncomment the commented-out section. Click the "Run with JS" button to reset the bin. Hover over the link and move the mouse cursor away before the timeout has elapsed. Move mouse over/out the link multiple times and notice that the popup always appears, as expected.

Cause:

The excerpt below is from the popover plugin code. The first time this function is invoked via a call to "element.popover()", it will construct a Popover() object and cache it on the attached element via the "bs.popover" data attribute. However, if the first invocation does not pass in an object, the value of the variable "options" becomes false, and the Popover() object is constructed with that value, which effectively means "use the default popover values, or those specified via data- attributes". Since there are no values specified in my example, the title and content attributes are set to the empty string, and because any subsequent call(s) to set the options are ignored, the result is a "zombie" popup.

    function Plugin(option) {
        return this.each(function () {
            var $this = $(this)
            var data = $this.data('bs.popover')
            var options = typeof option == 'object' && option

            if (!data && option == 'destroy') return
            // **below line is the problem**
            if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
            if (typeof option == 'string') data[option]()
        })
    }

Resolution:

This is quite an edge case, but I feel that the plugin should only assign and cache the Popover object if the options specified are not equal to the plugin's default options, perhaps in the tooltip.init() method.

Notes:

This affects tooltip as well.

@twbs-lmvtfy
Copy link

Hi @IanKemp!

You appear to have posted a live example (http://jsbin.com/lucotiyisu/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@kkirsche
Copy link
Contributor

Why use a popover instead of a tooltip for this type of behavior? Generally tooltips are for hover actions while popovers are for click-based triggers

@cvrebert cvrebert added the js label Feb 24, 2015
@cvrebert
Copy link
Collaborator

I would venture that it would be better if .tooltip('hide')/.popover('hide') on an element that doesn't have a tooltip/popover was a no-op, rather than having the side-effect of initializing an (in cases like yours, empty) tooltip/popover.

@cvrebert cvrebert changed the title popover: element with no data attributes, and calling any non-options method, causes no popup calling any optionless method on element with no data-* attributes creates empty tooltip/popover object Feb 24, 2015
@cvrebert cvrebert added this to the v3.3.4 milestone Mar 4, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants