Tooltipster content doubling up each time it is opened

Question

I'm using Tooltipster to show a list of items that the user can click so as to enter the item into a textarea. When a tooltip is created, I get its list of items with selectors = $("ul.alternates > li");

However, each time a tooltip is opened the item clicked will be inserted a corresponding number of times; for example if I've opened a tooltip 5 times then the item clicked will be inserted 5 times. I've tried deleting the variable's value after a tooltip is closed with functionAfter: function() {selectors = null;} but that had no effect.

I have a Codepen of the error here that should make it clearer.

// set list to be tooltipstered
$(".commands > li").tooltipster({
 interactive: true,
 theme: "tooltipster-light",
 functionInit: function(instance, helper) {
  var content = $(helper.origin).find(".tooltip_content").detach();
  instance.content(content);
 },
 functionReady: function() {
  selectors = $("ul.alternates > li");
  $(selectors).click(function() {
   var sampleData = $(this).text();
   insertText(sampleData);
  });
 },
 // this doesn't work
 functionAfter: function() {
  selectors = null;
 }
});

// Begin inputting of clicked text into editor
function insertText(data) {
 var cm = $(".CodeMirror")[0].CodeMirror;
 var doc = cm.getDoc();
 var cursor = doc.getCursor(); // gets the line number in the cursor position
 var line = doc.getLine(cursor.line); // get the line contents
 var pos = {
  line: cursor.line
 };
 if (line.length === 0) {
  // check if the line is empty
  // add the data
  doc.replaceRange(data, pos);
 } else {
  // add a new line and the data
  doc.replaceRange("\n" + data, pos);
 }
}

var code = $(".codemirror-area")[0];
var editor = CodeMirror.fromTextArea(code, {
 mode: "simplemode",
 lineNumbers: true,
 theme: "material",
 scrollbarStyle: "simple",
 extraKeys: { "Ctrl-Space": "autocomplete" }
});

body {
 margin: 1em auto;
 font-size: 16px;
}
.commands {
 display: inline-block;
}
.tooltip {
 position: relative;
 opacity: 1;
 color: inherit;
}
.alternates {
 display: inline;
 margin: 5px 10px;
 padding-left: 0;
}

.tooltipster-content .alternates {
 li {
  list-style: none;
  pointer-events: all;
  padding: 15px 0;
  cursor: pointer;
  color: #333;
  border-bottom: 1px solid #d3d3d3;
  span {
   font-weight: 600;
  }
  &:last-of-type {
   border-bottom: none;
  }
 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/theme/material.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/235651/jquery-3.2.1.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/235651/tooltipster.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/mode/simple.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/hint/show-hint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/scroll/simplescrollbars.js"></script>
<div class="container">
 <div class="row">
   <div class="col-md-6">
   <ul class="commands">
   <li><span class="command">Hover for my list</span><div class="tooltip_content">
    <ul class="alternates">
     <li>Lorep item</li>
     <li>Ipsum item</li>
     <li>Dollar item</li>
    </ul>
   </li>
   </div>
   </ul>
  </div>
  <div class="col-md-6">
   <textarea class="codemirror-area"></textarea>
  </div>
 </div>
</div>

score 1 · Answer 1 · answered Jun 11 '17 at 21:39

1

You are binding new clicks every time. I would suggest different code style but in that format you can just add before the click event

$(selectors).unbind('click');

Then do the click again..

answered Jun 11 '17 at 21:39

Shahaf Antwarg

489
3
11

score 1 · Accepted Answer · answered Jun 12 '17 at 00:18

Tooltipster's functionReady fires every time the tooltip is added to the DOM, which means every time a user hovers over the list, you are binding the event again.

Here are two ways to prevent this from happening:

Attach a click handler to anything that exists in the DOM before the tooltip is displayed. (Put it outside of tooltipspter(). No need to use functionReady.)

Example:

$(document).on('click','ul.alternates li', function(){
    var sampleText = $(this).text();
    insertText(sampleText);
})

Here's a Codepen.

Unbind and bind the event each time functionReady is triggered.

Example:

functionReady: function() {
    selectors = $("ul.alternates > li");
    $(selectors).off('click').on('click', function() {
        var sampleData = $(this).text();
        insertText(sampleData);
    });
}

Here's a Codpen.

Tooltipster content doubling up each time it is opened

2 Answers2