0

i use tippy.js with html template. My code as:

self._tippy = Tippy('.test', {
html: '#test_id',
....
....
onShow(){...}
...
})

In html template i have select tag with onclick event as:

<select id="language-list" onchange="changeLanguage()"></select>

i add options to the select dynamically. Everything seem OK but i can not reach changeLanguage event anywhere i don't understand where to write changeLanguage(){...} function to catch the event. i add the changeLanguage(){...} in tippy js onShow() or other places but can not reach event trigger. I only get the error message:

Uncaught ReferenceError: changeLanguage is not defined at HTMLSelectElement.onchange

On the other hand i try to use event handling with 

document.getElementById('language-list').addEventListener('change'){...}

but no success. Is anyone tell me what to do and what i missing.

I test it in jsfidd https://jsfiddle.net/s6zcn7tx/46/ but same result.

erata
  • 88
  • 10

1 Answers1

0

i find the solution in a sample at codepen.io/imnofox/pen/NvWjzK.

Using "change" eventListener for select event out of tippy js scope as:

document.querySelector("body").addEventListener("change", function(event) {
  let select = event.target;

if (select.tagName.toLowerCase() === "select" && select.id === "language-list"
) {
var value = select.value; // you got the value  
// do something else
})

if you want to change current tippy.js tolltip html then you can use event.target to reach to tooltip html. for examle i use:

let selectedAuthorsHtml = select.closest(".tippy-tooltip-content").childNodes[7].childNodes[3]; // to get selected authors html

and then update the html with new values to reflect tippy.js tooltip.

erata
  • 88
  • 10