从以下链接code的输出中可以看到
现在，当我们将鼠标悬停在Tab X上时，文字“将我悬停以查看工具提示2”。 在Tab X下方的绿色显示中 当我们将鼠标悬停在绿色的“将我悬停以查看工具提示2”上时，图像将显示
结果
Tab X
Hover me to see the tooltip2 (in green displays)
image displays
我想要实现的是当我们将鼠标悬停在Tab X上时如何使文本qtip-display-title =“将我悬停以查看工具提示2。放在Tab x的位置。
要隐藏的选项（隐藏）选项卡X（当鼠标悬停在选项卡X上时），并将文本“将我悬停以查看工具提示2”。
我想要
Hover me to see the tooltip2 (in green displays)
image displays
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.3.15/angular.min.js" data-semver="1.0.7"></script>
<script type="text/javascript" src="https://github.com/kamilkp/angular-vs-repeat/blob/master/dist/angular-vs-repeat.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<div ng-bind-html="vm.trustedHtml" my-compile="vm.trustedHtml"></div>
</body>
</html>
label {
display: inline-block;
width: 70px;
text-align: left;
}
li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
.animate-show {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
opacity: 1;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display: inline-block !important;
}
.animate-show.ng-hide {
opacity: 0;
}
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
var app = angular.module("app", ['ngAnimate']);
(function(angular) {
'use strict';
app.controller("MainCtrl", ['$scope', '$sce', function($scope, $sce){
var self = this;
self.trustedHtml = $sce.trustAsHtml('');
var html = '<tabs active="2"><tab label="Tab 1"></tab><tab label="Tab 2"></tab><tab label="Tab 3"></tab><tab label="Tab 4"></tab></tabs>';
self.trustedHtml = $sce.trustAsHtml(html);
}]);
})(window.angular);
/*app.directive('myCompile',myCompile);
myCompile.$inject = ['$compile'];
function myCompile($compile) {
var directive = {
restrict: 'A',
link: postLink
};
return directive;
////////////
function postLink(scope, element, attrs) {
scope.$watch(attrs.myCompile, function(value) {
element.html(value);
$compile(element.contents())(scope);
});
}
}
*/
app.directive('myCompile',function($compile) {
return {
restrict: 'A',
link: {
post: function(scope,element,attrs){
scope.$watch(attrs.myCompile, function(value) {
element.html(value);
$compile(element.contents())(scope);
});
}
}
};
});
app.directive('tabs', function() {
return {
restrict: 'E',
scope: {},
transclude: true,
controller: function () {
this.tabs = [];
this.addTab = function addTab(tab) {
this.tabs.push(tab);
};
this.selectTab = function selectTab(index) {
for (var i = 0; i< this.tabs.length; i++) {
this.tabs[i].selected = false;
}
this.tabs[index].selected = true;
};
this.hoverIn = function hoverIn(index){
for (var i = 0; i< this.tabs.length; i++) {
this.tabs[i].hoverEdit = false;
}
this.tabs[index].hoverEdit = true;
};
this.hoverOut = function hoverOut(index){
this.tabs[index].hoverEdit = false;
};
},
controllerAs:'tabs',
link: function ($scope, $element, $attrs, $ctrl) {
// set the active tab, or the first tab
$ctrl.selectTab($attrs.active || 0);
},
template: `
<div class="tabs">
<ul class="tabs__list">
<li ng-repeat="tab in tabs.tabs">
<a ng-bind="tab.label" ng-mouseover="tabs.hoverIn($index);" ng-mouseleave="tabs.hoverOut($index);" ng-click="tabs.selectTab($index);"></a>
<div ng-show="tab.hoverEdit" class="animate-show">
<div my-qtip2 target=mouse position=right style="background-color:green;"
qtip-display-title="Hover me to see the tooltip2."
qtip-title="Here is the title for this qtip2">
<div>
Here are the content for this tooltip2.
</div>
<img style="width:200px;" src="http://st.depositphotos.com/1024768/1342/v/950/depositphotos_13422852-Cartoon-Cute-Little-Happy-Boy.jpg"/>
</div>
</div>
</div>
</li>
</ul>
<div class="tabs__content" ng-transclude></div>
</div>`
}
});
app.directive('tab', function() {
return {
restrict: 'E',
scope: {
label: '@'
},
require: '^tabs',
transclude: true,
template: `
<div class="tabs__content" ng-if="tab.hoverEdit || tab.selected">
<div ng-transclude></div>
</div>
`,
link: function ($scope, $element, $attrs, $ctrl) {
$scope.tab = {
label: $scope.label,
hoverEdit: false,
selected:false
};
$ctrl.addTab($scope.tab);
}
};
});
app.directive("myQtip2", function ($compile, $parse) {
return{
restrict: "A",
scope: {
qtipId: "@",
qtipContent: "@",
qtipDisplayTitle: "@"
},
transclude: true,
replace: true,
template: '<div style="display:inline-block;margin:0 0 3px;">' +
'<span ng-if=qtipDisplayTitle>{{qtipDisplayTitle}}</span>' +
'<span id="iconContainer"></span> ' +
'<div id="qtip" style="display:none;" ng-transclude>' +
'<div ng-if=qtipContent ng-bind-html-unsafe="qtipContent"></div>' +
'</div>' +
'</div>',
link: function (scope, element, attrs) {
// $compile($(element).find("i[qtip-icon]"))(scope).appendTo($(element).find("#iconContainer"));
scope.qtipSkin = (attrs.skin ? "qtip-" + attrs.skin : "qtip-dark");
scope.closeButton = (attrs.closeButton == null ? false : true)
switch (attrs.position) {
case "top":
scope.qtipPointerPos = "bottom center";
scope.qtipContentPos = "top center";
break;
case "bottom":
scope.qtipPointerPos = "top center";
scope.qtipContentPos = "bottom center";
case "bottomright":
scope.qtipPointerPos = "top left";
scope.qtipContentPos = "bottom right";
break;
case "left":
scope.qtipPointerPos = "bottom right";
scope.qtipContentPos = "top left";
break;
case "right":
scope.qtipPointerPos = "center left";
scope.qtipContentPos = "center right";
break;
default:
scope.qtipPointerPos = "bottom left";
scope.qtipContentPos = "top right";
break;
}
$(element).qtip({
content: {
text: $(element).find("#qtip"),
title:attrs.qtipTitle,
button: scope.closeButton
},
style: {
classes: scope.qtipSkin + " qtip-rounded qtip-shadow "
// this code is to modify the triangle pointer of the tooltip*/
/*
tip:{
border: 1,
width: 7,
height: 10
}
*/
},
show: {
event: 'mouseenter click unfocus',
solo: true
},
hide: {
event: (scope.closeButton == true ? "false" : "click mouseleave"),
delay: 500,
// fixed:(attrs.fixed==null ? false : true),
fixed: (($(element).hover || attrs.fixed !== null) ? true : false),
target: (attrs.fixed == null ? $(this) : $(element)),
leave: false
},
position: {
viewport: $(window),// Keep it on-screen at all times if possible
target: (attrs.target ? attrs.target : "event"),
adjust: {
method: 'shift',
mouse: (attrs.static == null ? true : false)
},
my: scope.qtipPointerPos,
at: scope.qtipContentPos
}
});
scope.$on("$destroy", function () {
$(element).qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
});
}
}
});
许多坦克。