autotooltip

zombieJ · Dec 17, 2013 · f19f952 · f19f952
1 parent f1c8181
commit f19f952
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 2 deletions.
diff --git a/example/autotooltip.html b/example/autotooltip.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Bootstrap Component Sample</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<!-- jQuery -->
+		<script src="assets/jquery-1.10.2.min.js"></script>
+		<!-- Bootstrap -->
+		<script src="assets/bootstrap/js/bootstrap.min.js"></script>
+		<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+		<!-- src -->
+		<script src="../src/common/bootstrap-common.js"></script>
+		<script src="../src/autotooltip/bootstrap-autotooltip.js"></script>
+		<link href="../src/autotooltip/bootstrap-autotooltip.css" rel="stylesheet" media="screen">
+
+		<script>
+			$(document).ready(function(){
+				$("#btn_open").click(function() {
+					$.autotooltip(true);
+					$("#btn_open").prop("disabled", true);
+					$("#btn_close").prop("disabled", false);
+				});
+				$("#btn_close").click(function() {
+					$.autotooltip(false);
+					$("#btn_open").prop("disabled", false);
+					$("#btn_close").prop("disabled", true);
+				});
+			});
+		</script>
+		<style>
+
+		</style>
+	</head>
+	<body>
+		<h3>Auto tooltip everywhere</h3>
+		<p>Hello <a data-toggle="tooltip" title="Hello Wolrd!">world</a>.</p>
+		<p>
+			This is an <a data-toggle="tooltip" title="I'm example!">example</a> for auto-tooltips.
+			<strong data-toggle="tooltip" title="You can open auto-tooltip and close it if you needn't it anymore.">Do not open it if you need take of performance</strong>.
+		</p>
+		<p>Open auto-tooltip as <code data-toggle="tooltip" title="Code Here">$.autotooltip(true);</code>.</p>
+		<p>
+			After open <a data-toggle="tooltip" title="GoGoGo!">auto-tooltips</a>,
+			it will auto <a data-toggle="tooltip" title="Bind Event!">bind</a> tooltip when user move mouse over the tooltipped element.
+			<a data-toggle="tooltip" title="Revent Before">After</a> close it, element which not bind tooltip will not auto-tooltip <a data-toggle="tooltip" title="Last tooltip here">untill</a> your open it again.
+		</p>
+		<button class="btn btn-primary" id="btn_open">Open AutoToolTips</button>
+		<button class="btn btn-danger" id="btn_close" disabled="disabled"
+				data-toggle="tooltip" title="Oh! Close it!">Close AutoToolTips</button>
+	</body>
+</html>
diff --git a/src/autotooltip/bootstrap-autotooltip.css b/src/autotooltip/bootstrap-autotooltip.css
@@ -0,0 +1,19 @@
+.progress [data-toggle="slider"] {
+	height: 100%;
+	vertical-align: top;
+	float: left;
+}
+
+.progress[data-slider-container] {
+	position: relative;
+}
+
+.progress[data-slider-container] [data-toggle="slider"] {
+	position: absolute;
+	height: 20px;
+}
+
+.progress[data-slider-container] [data-toggle="slider-background"] {
+	position: absolute;
+	height: 20px;
+}
diff --git a/src/autotooltip/bootstrap-autotooltip.js b/src/autotooltip/bootstrap-autotooltip.js
@@ -0,0 +1,26 @@
+/* options:
+				boolean			default false. true to open auto tooltips else to close it.
+*/
+
+!function ($) {
+	var _on = false;
+
+	$.extend({
+		autotooltip:function(option){
+			if(option === true && _on == false) {
+				$(document).on("mouseover.bs.autotooltip", "[data-toggle='tooltip']", tooltipHandler);
+				_on = true;
+			} else if(option === false && _on == true) {
+				$(document).off("mouseover.bs.autotooltip");
+				_on = false;
+			}
+		}
+	});
+
+	function tooltipHandler() {
+		var _my = $(this);
+		if(_my.attr("data-original-title") == null) {
+			_my.tooltip('show');
+		}
+	};
+}(window.jQuery);
diff --git a/src/radio/bootstrap-radio.js b/src/radio/bootstrap-radio.js
@@ -1,7 +1,5 @@
 /* options:
 	to:			element			set the value of target element
-
-	checked:	boolean			set radio checked or not
 */
 
 !function ($) {