---
layout: default
javascript: |
  console.log('yolo');

  $(function(){
    $("#tooltip").popover({
      placement: 'bottom',
      title: 'annotation',
      html: true,
      content: $('#annotation-control').html()
    }); 
  
  $("#tooltip2").popover({
      placement: 'bottom',
      title: 'annotation',
      html: true,
      content: $('#annotation-control-2').html()
    });

  $('.metacategory').change(function(e){
    console.log(e);
  });

  });
---

<div class="container my-3">

<button id="tooltip" type="button" class="btn btn-secondary">Voir tooltip</button>


<button id="tooltip2" type="button" class="btn btn-secondary">Voir tooltip (commentaire)</button>

</div>

<div id="annotation-control" class="invisible">
	<select class="metacategory custom-select mb-2 w-100">

<optgroup label="général">
{% for meta in site.data.metacategories %}
		<option value="{{ meta.label  }}">{{ meta.label }}</option>
{% endfor %}
</optgroup>

<optgroup label="groupe">
{% for meta in site.data.metacategories-extra %}
	<option value="{{ meta.label  }}">{{ meta.label }}</option>
{% endfor %}
	</optgroup>
	</select>

  <textarea rows="3" name="comment-content" id="about" class="comment-content1 form-control input-md" style="display:none;"></textarea>

	<div class="text-right">
		<button class="btn btn-primary btn-sm mt-1">annoter</button>
	</div>

</div>

<div id="annotation-control-2" class="invisible">
	<select class="metacategory custom-select mb-2 w-100">

<optgroup label="général">
{% for meta in site.data.metacategories %}
		<option {% if meta.label == "commentaire" %}selected{% endif %} value="{{ meta.label  }}">{{ meta.label }}</option>
{% endfor %}
</optgroup>

<optgroup label="groupe">
{% for meta in site.data.metacategories-extra %}
	<option value="{{ meta.label  }}">{{ meta.label }}</option>
{% endfor %}
	</optgroup>
	</select>

  <textarea rows="3" name="comment-content" id="about" class="comment-content form-control input-md"></textarea>

	<div class="text-right">
		<button class="btn btn-primary btn-sm mt-2">annoter</button>
	</div>

</div>