---

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>