# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xiaoxiami.gitbook.io/angularjs/gong-neng-zu-jian/tooltip.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.