положи наведи мне текст вместо вкладки х - PullRequest
Новая
       33

положи наведи мне текст вместо вкладки х

0 голосов
/ 04 мая 2019

Как видно из выходных данных следующей ссылки код

Теперь, когда мы наведем курсор на вкладку X, появится текст «Подведите курсор ко мне, чтобы увидеть всплывающую подсказку 2».в зеленых дисплеях под вкладкой X и когда мы наводим курсор на зеленый '' Наведите меня, чтобы увидеть подсказку 2 '', изображение отображает

, в результате чего 

Tab X 
    Hover me to see the tooltip2 (in green displays)
        image displays

Чего я пытаюсь достичьКогда мы наведем курсор на вкладку X Как сделать текст qtip-display-title = "Наведите меня, чтобы увидеть подсказку 2".быть поставленным на место Tab x.

Означает заставить исчезнуть (Скрыть) Tab X (Когда происходит наведение на закладку X) и поместить на место текст «Наведите меня, чтобы увидеть подсказку 2».

в результате я хочу 

Hover me to see the tooltip2 (in green displays)
    image displays

HTML 

 <!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>

CSS 

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;
}

js 

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
            });

        }
    }
});

Много танков.

...