Tooltip

#介绍

gihub地址:https://github.com/angular-ui/bootstrap/tree/0.14.3/src/tooltip

注意版本不同,使用outclick得版本大于0.14.3

代码

conroller

   // product info tip
        $scope.openedTooltip = false;
        $scope.productInfoTooltip =  function (id, ean, language) {
            if ($scope.openedTooltip != ean) {
                $scope.openedTooltip = false;
            }

            var url = '/approvalCMS/product/viewTip?shop_id=' + $scope.shopId  +
                '&product_id=' + id + '&ean='+ ean + '&language='+ language;
            $scope.productHtmlTooltip = $sce.trustAsHtml(
                '<iframe frameborder="0" onload="loadProductInfoTip()" ' +
                ' name="productInfoTip" width="' + $window.innerWidth/2 +
                '" height="' +  $window.innerHeight/2 + '" src="' + url + '"></iframe>'
            );
            $scope.openedTooltip =($scope.openedTooltip != false ? false : ean);
        };

主要引入$sce, $window

页面

 <td tooltip-is-open="openedTooltip == {{value.ean}}" tooltip-trigger="none" tooltip-placement="right" tooltip-class="product-view-tooltip"
                    uib-tooltip-html="productHtmlTooltip" tooltip-append-to-body="true"
                    ng-mouseenter="productInfoTooltip(value._id, value.ean, value.language)"
                    ng-click="productInfo(value._id, value.ean, value.language, false)"
                     style="cursor:pointer"><img ng-src="{{value.images.main_white}}" height="60px" width="60px"/></td>

问题点:当打开的是一个iframe,有滑动的,需要看完,划出才关闭.

<script>
    loadProductInfoTip = function() {
        $("iframe[name='productInfoTip']").mouseleave(function() {
            $(".product-view-tooltip .tooltip-arrow, .product-view-tooltip .tooltip-inner").hide();
        });
    };
</script>

这样写保证火狐和谷歌浏览器的兼容性.