-1

I have an div: $(".results"). As things are happening, results get added to this div. One of the many things is a dice roll, formatted in a <kdb>

For Example:

function resultBox(result, color="red"){ return "<kbd class='"+color+"'>"+result+"</kbd>";

The default kdb color is red, but I've added so many colors (different colors for different result types). I want to add a tooltip to each kdb to explain the colors.

For Example:

function resultBox(result, color="red"){
  return "<kbd class='"+color+"' data-toggle='tooltip' title='"+colorInfo(color)+"'>"+result+"</kbd>";
}

function colorInfo(color) {
  return "blah blah";
}

(I do not need assistance with the colorInfo() function) I'm just having trouble figuring out why the Bootstrap Tooltip isn't showing properly. (Meaning: I'm seeing a standard tooltip, as if I hadn't added Bootstrap. Instead of seeing the Bootstrap default black tooltip with the little arrow)

BEFORE YOU ANSWER PLEASE NOTE

  • Bootstrap Tooltips are formatted properly. This has been added to my main javascript page. $('[data-toggle="tooltip"]').tooltip(); I can use Bootstrap Tooltips normally by writting them out in normal HTML.

I'm just not sure how to bind them when dynamically creating them in Javascript

EDIT: This is not a duplicate. The question has been answered. The answer was not found in the "possible duplicate"

MEE
  • 75
  • 8
  • Possible duplicate of [How do I bind Twitter Bootstrap tooltips to dynamically created elements?](https://stackoverflow.com/questions/9958825/how-do-i-bind-twitter-bootstrap-tooltips-to-dynamically-created-elements) – 123survesh Mar 16 '19 at 15:50

1 Answers1

2

You need to run $(#AddedItems).tooltip() function once you append something in DIV.

Note: this is not working becuase this function ($('[data-toggle="tooltip"]').tooltip()) only works on dom elements which are available in dom.

123survesh
  • 561
  • 3
  • 13
Rhday Parikh
  • 52
  • 6