--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design/tooltip.html	Tue Jul 18 18:15:51 2017 +0200
@@ -0,0 +1,83 @@
+---
+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>