# Tooltip

## #介绍

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

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

代码

conroller<br>

```javascript
   // 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

页面

```markup
 <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,有滑动的,需要看完,划出才关闭.

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

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

## 资料

[AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover](https://www.cnblogs.com/pilixiami/p/5661600.html)

[angular-ui-bootstrap中，setTriggers无效](https://blog.csdn.net/rencaishigepi/article/details/79412916)

[jQuery.ready() 函数详解](https://www.cnblogs.com/limeiky/p/6638357.html)

[mouseout 事件与mouseleave 事件区别](http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout)

**iframe**

[Web前端之iframe详解](https://www.cnblogs.com/lvhw/p/7107436.html)

[iframe高度自适应的6个方法](http://caibaojian.com/iframe-adjust-content-height.html)

[iframe加载完成事件](https://blog.csdn.net/qq_42968609/article/details/85162447)

[angularjs 在 iframe 里面无法正确显示 src 指定的内容](https://xiaoxiami.gitbook.io/api-gateway/luazhi-shi/jin-jie/yuan-biao)

[用iframe方式为页面加载完毕前显示等待提示](https://blog.csdn.net/zhexiaode/article/details/82256340)

**问题**

[how to detect if the iframe is fully loaded in angular](https://stackoverflow.com/questions/36723933/how-to-detect-if-the-iframe-is-fully-loaded-in-angular)

[uib-tooltip-html not working](https://stackoverflow.com/questions/40992011/uib-tooltip-html-not-working)

[AngularJS using $sce.trustAsHtml with ng-repeat](https://stackoverflow.com/questions/24459194/angularjs-using-sce-trustashtml-with-ng-repeat)

[AngularJS Error: $rootScope:infdig](https://stackoverflow.com/questions/26753014/angularjs-error-rootscopeinfdig)

[angular怎么监听屏幕宽度改变](https://segmentfault.com/q/1010000011637130)

[Angularjs 动态获取屏幕宽度](https://www.jianshu.com/p/b6655c932178)