Creating tooltips via javascript

Arthur Sturzbecher
1 parent 27bde83c
Showing 3 changed files with 65 additions and 0 deletions Show diff stats
style.css
theme.js
tooltip.css
@@ -17,6 +17,9 @@
 /****************** Recent content ********************/
 @import url(recent-content.css);
  
+/****************** bootstrap tooltips ********************/
+@import url(tooltip.css);
+
 /****************** FIM cabecalho azul ****************/
  
 /****************** Block Agenda ********************/
@@ -179,7 +179,32 @@ $(&#39;#link-buscar&#39;).click(function(e) {
     });
   }
  
+  function add_top_tooltips(){
+    $('#content span[title]').attr("data-toggle","tooltip");
+
+    $('[data-toggle="tooltip"]').tooltip({
+        position: {
+            my: "top-82",
+            at: "center"
+        },
+        tooltipClass: "ui-tooltip-top"
+    });
+  }
+
+  function add_bottom_tooltips(){
+    $('#content span[title]').attr("data-toggle","tooltip");
+
+    $('[data-toggle="tooltip"]').tooltip({
+        position: {
+            my: "bottom+82",
+            at: "center"
+        },
+        tooltipClass: "ui-tooltip-bottom"
+    });
+  }
+
   $(document).ready(function(){
+    add_top_tooltips();
     set_events();
     move_article_buttons();
     add_link_to_article_div();
@@ -0,0 +1,37 @@
+.ui-tooltip {
+  position: relative;
+  z-index: 1070;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  background: #172638;
+  color: white;
+  padding: 15px 10px 15px 20px;
+  border: 0px !important;
+}
+
+.ui-tooltip-bottom:after {
+  bottom: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  border-bottom-color: #172638;
+  border-width: 6px;
+  margin-left: -6px;
+}
+
+.ui-tooltip-top:after {
+  top: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  border-top-color: #172638;
+  border-width: 6px;
+  margin-left: -6px;
+}
+
...	...	@@ -17,6 +17,9 @@
17	17	/**************** Recent content ******************/
18	18	@import url(recent-content.css);
19	19
	20	+/**************** bootstrap tooltips ******************/
	21	+@import url(tooltip.css);
	22	+
20	23	/**************** FIM cabecalho azul **************/
21	24
22	25	/**************** Block Agenda ******************/
...	...
...	...	@@ -179,7 +179,32 @@ $('#link-buscar').click(function(e) {
179	179	});
180	180	}
181	181
	182	+ function add_top_tooltips(){
	183	+ $('#content span[title]').attr("data-toggle","tooltip");
	184	+
	185	+ $('[data-toggle="tooltip"]').tooltip({
	186	+ position: {
	187	+ my: "top-82",
	188	+ at: "center"
	189	+ },
	190	+ tooltipClass: "ui-tooltip-top"
	191	+ });
	192	+ }
	193	+
	194	+ function add_bottom_tooltips(){
	195	+ $('#content span[title]').attr("data-toggle","tooltip");
	196	+
	197	+ $('[data-toggle="tooltip"]').tooltip({
	198	+ position: {
	199	+ my: "bottom+82",
	200	+ at: "center"
	201	+ },
	202	+ tooltipClass: "ui-tooltip-bottom"
	203	+ });
	204	+ }
	205	+
182	206	$(document).ready(function(){
	207	+ add_top_tooltips();
183	208	set_events();
184	209	move_article_buttons();
185	210	add_link_to_article_div();
...	...
...	...	@@ -0,0 +1,37 @@
	1	+.ui-tooltip {
	2	+ position: relative;
	3	+ z-index: 1070;
	4	+ font-family: Arial, sans-serif;
	5	+ font-size: 13px;
	6	+ background: #172638;
	7	+ color: white;
	8	+ padding: 15px 10px 15px 20px;
	9	+ border: 0px !important;
	10	+}
	11	+
	12	+.ui-tooltip-bottom:after {
	13	+ bottom: 100%;
	14	+ left: 50%;
	15	+ border: solid transparent;
	16	+ content: " ";
	17	+ height: 0;
	18	+ width: 0;
	19	+ position: absolute;
	20	+ border-bottom-color: #172638;
	21	+ border-width: 6px;
	22	+ margin-left: -6px;
	23	+}
	24	+
	25	+.ui-tooltip-top:after {
	26	+ top: 100%;
	27	+ left: 50%;
	28	+ border: solid transparent;
	29	+ content: " ";
	30	+ height: 0;
	31	+ width: 0;
	32	+ position: absolute;
	33	+ border-top-color: #172638;
	34	+ border-width: 6px;
	35	+ margin-left: -6px;
	36	+}
	37	+
...	...