AngularJS custom tooltip directive
How do I make an angularjs custom tooltip directive?
What is a angularjs custom tooltip directive? How do you make a angularjs custom tooltip directive? This script and codes were developed by Andreas Nylin on 30 September 2022, Friday.
AngularJS custom tooltip directive Previews
AngularJS custom tooltip directive - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS custom tooltip directive</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="ng-app" ng-app="tooltipApp"> <p>Lorem ipsum dolor sit amet, at alienum similique sea, sea discere habemus ei, ei suas mutat molestie sed. No his viris evertitur, id mei erat contentiones. Ei mea melius argumentum. Nulla nostrum at vim, ei facete deleniti ullamcorper duo. His at <a href="3" tooltip="Iudico aperiam scripserit">iudico aperiam scripserit.</a></p> <p>Vel deleniti percipitur no, vis te minim legere aliquando. Fuisset fierent conclusionemque cum et, duo quis feugiat ut. Ut eam minimum consulatu, <a href="3" tooltip="Vel deleniti percipitur no" tooltip-position="left">zril nostrum</a> eu est, mel tota ubique officiis ei. Erant elitr quaerendum nam in.</p> <p>Ius novum alterum democritum an, cu quo quis viderer. Mei verear eripuit ex, <a href="3" tooltip="Ne eum aperiri delicatissimi" tooltip-position="up">expetenda</a> conceptam id qui, aeque movet salutatus ius ea. At illum omnesque noluisse has, ne eum aperiri delicatissimi. No qui doctus blandit.</p> <p>Mea dicam quodsi legimus at, libris iuvaret feugiat ea mei, <a href="3" tooltip="Ei stet eruditi quo. Nonumy libris ius ne. Ea pro tollit corpora principes, an pri impetus petentium inciderint. Ea nam case illud pertinacia, modo invenire duo eu, ne exerci voluptua ius" tooltip-position="right">aperiri</a> adolescens intellegebat ut est. Pro ad alii feugiat adipiscing. Ut eos aeque utinam doctus, labore eirmod fierent qui at. Tota erat tritani ea duo, id vel putant similique. Cu vel liber invidunt, illud augue fuisset et nec.</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.2.9/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>AngularJS custom tooltip directive - Script Codes CSS Codes
body { margin: 1em; font: 1em/1.4 sans-serif; height: 100%;
}
.tooltip { display: none; position: absolute; background-color: #222; padding: 7px 10px; max-width: 250px; color: #fff;
}
.tooltip-show { display: inherit;
}
.tooltip-arrow { position: absolute; width: 0; height: 0;
}
.tooltip-down .tooltip-arrow { top: -5px; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #222;
}
.tooltip-up .tooltip-arrow { bottom: -5px; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #222;
}
.tooltip-right .tooltip-arrow { left: -5px; top: 50%; margin-top: -3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #222;
}
.tooltip-left .tooltip-arrow { right: -5px; top: 50%; margin-top: -3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #222;
}AngularJS custom tooltip directive - Script Codes JS Codes
var tooltipApp = angular.module('tooltipApp', []);
tooltipApp.directive('tooltip', function ($document, $compile) { return { restrict: 'A', scope: true, link: function (scope, element, attrs) { var tip = $compile('<div ng-class="tipClass">{{ text }}<div class="tooltip-arrow"></div></div>')(scope), tipClassName = 'tooltip', tipActiveClassName = 'tooltip-show'; scope.tipClass = [tipClassName]; scope.text = attrs.tooltip; if(attrs.tooltipPosition) { scope.tipClass.push('tooltip-' + attrs.tooltipPosition); } else { scope.tipClass.push('tooltip-down'); } $document.find('body').append(tip); element.bind('mouseover', function (e) { tip.addClass(tipActiveClassName); var pos = e.target.getBoundingClientRect(), offset = tip.offset(), tipHeight = tip.outerHeight(), tipWidth = tip.outerWidth(), elWidth = pos.width || pos.right - pos.left, elHeight = pos.height || pos.bottom - pos.top, tipOffset = 10; if(tip.hasClass('tooltip-right')) { offset.top = pos.top - (tipHeight / 2) + (elHeight / 2); offset.left = pos.right + tipOffset; } else if(tip.hasClass('tooltip-left')) { offset.top = pos.top - (tipHeight / 2) + (elHeight / 2); offset.left = pos.left - tipWidth - tipOffset; } else if(tip.hasClass('tooltip-down')) { offset.top = pos.top + elHeight + tipOffset; offset.left = pos.left - (tipWidth / 2) + (elWidth / 2); } else { offset.top = pos.top - tipHeight - tipOffset; offset.left = pos.left - (tipWidth / 2) + (elWidth / 2); } tip.offset(offset); }); element.bind('mouseout', function () { tip.removeClass(tipActiveClassName); }); tip.bind('mouseover', function () { tip.addClass(tipActiveClassName); }); tip.bind('mouseout', function () { tip.removeClass(tipActiveClassName); }); } }
});
| Developer | Andreas Nylin |
| Username | andreasnylin |
| Uploaded | September 30, 2022 |
| Rating | 3.5 |
| Size | 3,201 Kb |
| Views | 42,504 |
Do you need developer help for AngularJS custom tooltip directive?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Andreas Nylin (andreasnylin) Script Codes
| Name | Size |
| CSS target the middle element | 1,657 Kb |
| Mega Man | 2,844 Kb |
| CSS 3D Visualizer | 0 Kb |
| Random Accessible Color Contrast | 3,995 Kb |
| CSS pumpkin generator | 4,657 Kb |
| In an alternate dimension where GeoCities prospered and took over the internet... | 3,088 Kb |
| Polar bear | 3,471 Kb |
| Responsive fixed image, fluid content | 2,056 Kb |
| CSS SKULL | 2,243 Kb |
| Tab panel | 3,201 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| GrcJS | Vino6 | 2,047 Kb |
| AngularJS Animated Todo List | Ehaase | 2,975 Kb |
| Button shaking | SusanneLundblad | 2,227 Kb |
| Countdown Timer | Massiebn | 3,001 Kb |
| LBCA - Mail canvas | Emnbdx | 3,856 Kb |
| Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
| Shape Outside - Polygon | Stacy | 3,954 Kb |
| Hello People | Danburrows | 2,365 Kb |
| Flexbox slider | Rendro | 3,459 Kb |
| IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!