JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<select data-bind="options: choices, optionsCaption: 'none', value: myValue"></select>
<hr/>

<div class="tooltip" data-bind="tooltip: myValue"></div>

<script id="one" type="text/html">
    <div class="one">One Content</div>
</script>

<script id="two" type="text/html">
    <div class="two">Two Content</div>
</script>

CSS

.tooltip {
  width: 200px;
  height: 200px;
  background-color: pink;    
}

JavaScript

ko.bindingHandlers.tooltip = {
    init: function(element, valueAccessor) {
        //valueAccessor is a function that returns what you passed to the binding
        var template = valueAccessor(),
            //if the template binding's name param is given a function it will call it with the current data item and let you calculate the name. We want to just use the observable's value as the name so just need to make sure that the observable is not called with an argument (as it would change the value)
            templateAccessor = function() {
                return template();
            };
        
        //add a template binding to this element (if we have to append another element for the tooltip, then we could apply bindings to it)
        ko.applyBindingsToNode(element, {
            visible: template,
            template: {
                name:  templateAccessor,
                'if': template
            }
        });
        
        //this tells KO to not bind the children, as the template binding will do it
        return { controlsDescendantBindings: true };
    }
};

ko.applyBindings({
    choices: ["one", "two"],
    myValue: ko.observable('')
});