Angular를 사용한 부트스트랩툴팁 사용JS

source

Angular를 사용한 부트스트랩툴팁 사용JS

myloves 2023. 3. 29. 22:06

Angular를 사용한 부트스트랩툴팁 사용JS

앱에서 Bootstrap 툴팁을 사용하려고 합니다.내 앱은 Angular를 사용하고 있다.JS 현재 다음과 같은 것이 있습니다.

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

이거 좀 써야 될 것 같아

$("[data-toggle=tooltip]").tooltip();

하지만 잘 모르겠어요.위의 행을 추가해도 코드가 작동하지 않습니다.UI 부트스트랩은 필요 이상으로 사용하기 때문에 사용을 피하고 있습니다.단, 툴팁만 포함하면 됩니다.하지만 어떻게 해야 할지 모르겠어요.

누가 AngularJS에서 Bootstrap Tooltip을 얻는 방법을 가르쳐 주시겠습니까?

처음에 툴팁을 동작시키려면 코드 내에서 툴팁을 초기화해야 합니다.각도 무시JS에서는 다음과 같이 jQuery에서 툴팁을 사용할 수 있습니다.

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

이것은 Angular에서도 작동합니다.JS 앱은 Angular에 의해 렌더링된 콘텐츠가 아니면 됩니다(예: ng-repeat).이 경우 이 처리를 위한 지시문을 작성해야 합니다.여기 제게 효과가 있었던 간단한 지침이 있습니다.

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

그런 다음 툴팁을 표시하는 요소에 "tooltip" 속성을 포함하기만 하면 됩니다.

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

제가 생각해낸 최고의 솔루션은 다음과 같은 "onmouseenter" 속성을 요소에 포함시키는 것입니다.

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

간단한 답변 - UI 부트스트랩(ui.bootstrap.tooltip) 사용

이 질문에 대한 매우 복잡한 답변들이 많이 있는 것 같다.나한테 효과가 있었던 건 이거야

UI 부트스트랩 설치 -$ bower install angular-bootstrap
합니다.- " UI " - "angular.module('myModule', ['ui.bootstrap']);
html에서 uib-tooltip 디렉티브를 사용합니다.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

만약 당신이 Angular 앱을 만들고 있다면, 당신은 jQuery를 사용할 수 있지만, 좀 더 Angular drived paradigm을 위해 그것을 피하려고 하는 많은 좋은 이유들이 있다.부트스트랩에서 제공하는 스타일을 계속 사용할 수 있지만 UI 부트스트랩을 사용하여 jQuery 플러그인을 네이티브 Angular로 바꿉니다.

Boostrap CSS 파일, Angular.js 및 ui를 포함합니다.Bootstrap.js:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

해 주세요.ui.bootstrap다음과 같이 합니다.

var app = angular.module('plunker', ['ui.bootstrap']);

그런 다음 jQuery로 픽업된 데이터 속성 대신 각도 지시어를 사용할 수 있습니다.

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

플런커에서의 데모

UI 부트스트랩 회피

jQuery.min.js(94kb ) + Bootstrap.min.js(32kb)는 필요한 것보다 훨씬 많은 양을 제공하며 ui-bootstrap.min.js(41kb)도 제공합니다.

또한 모듈을 다운로드하는 데 걸리는 시간은 성능의 한 측면일 뿐입니다.

꼭 필요한 모듈만 로드하고 싶다면 "Create a Build"를 선택하여 Bootstrap-UI 웹사이트에서 툴팁을 선택할 수 있습니다.또는 툴팁의 소스 코드를 살펴보고 필요한 것을 선택할 수 있습니다.

툴팁과 템플릿(6kb)만으로 최소한의 커스텀 빌드를 실현합니다.

Bootstrap JS와 jQuery를 포함했습니까?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

아직 로드하지 않은 경우 Angular UI(http://angular-ui.github.io/bootstrap/)는 오버헤드가 크지 않을 수 있습니다.Angular 앱에서 사용하고 있는데 툴팁 디렉티브가 있습니다.사용해보십시오.tooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

간단한 Angular Directive를 썼는데 잘 되고 있어요.

여기 데모가 있습니다.http://jsbin.com/tesido/edit?html,js,output

Directive(부트스트랩 3) :

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

4 를 경우는,의 6 를 치환할 .「 4 」、「 6 」、「 11 」tooltip('destroy')tooltip('dispose')(이 업데이트에 대해 사용자 1191559에게 감사드립니다)

「「」를 만 하면 .bootstrap-tooltip「」를 title는 에 합니다. Angular는 에 대한 변화를 모니터링합니다.title그렇지 않으면 툴팁 처리를 부트스트랩으로 넘깁니다.

이를 통해 기본 부트스트랩 툴팁 옵션을 다음과 같이 사용할 수도 있습니다.data-아티부트

마크업:

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

분명히 이것은 Angular Strap과 UI Bootstrap이 제공하는 모든 정교한 바인딩과 고급 통합은 아니지만, 이미 Angular 앱에서 Bootstrap의 JS를 사용하고 있고, 컨트롤러를 변경하거나 마우스 이벤트를 관리하지 않고 앱 전체에 걸쳐 기본적인 툴팁 브릿지가 필요한 경우 좋은 솔루션입니다.

하시면 됩니다.selector 동적 단일 페이지 응용 프로그램의 경우 옵션:

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

선택기가 제공된 경우 툴팁 개체가 지정된 대상에 위임됩니다.실제로는 동적 HTML 콘텐츠에 툴팁을 추가할 수 있도록 하기 위해 사용됩니다.

다음과 같은 간단한 지시문을 작성할 수 있습니다.

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

그런 다음 필요에 따라 커스텀 디렉티브를 추가합니다.

<button my-tooltip></button>

이것은 Angular Strap을 사용하여 실행할 수 있습니다.

는 Bootstrap 3.0+를 AngularJS 1.2+ 앱에 심리스하게 통합할 수 있는 네이티브 디렉티브 세트입니다."

라이브러리 전체를 다음과 같이 삽입할 수 있습니다.

var app = angular.module('MyApp', ['mgcrea.ngStrap']);

또는 다음과 같은 툴팁 기능만 가져옵니다.

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']);

스택에서의 데모 스니펫

var app = angular.module('MyApp', ['mgcrea.ngStrap']);

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

way, add " " " " " , "$("[data-toggle=tooltip]").tooltip();이치노

var app = angular.module('MyApp', ['mgcrea.ngStrap']);

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

angularjs에서 부트스트랩툴팁을 사용하는 경우 jquery-ui도 사용하는 경우 스크립트의 순서라는 점에 주의해 주십시오.

j쿼리
jQuery UI
부트스탭

테스트 및 테스트 완료

툴팁을 동적으로 할당하는 경우에만 읽어주세요.

ㅇㅇㅇ.<div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

뷰에서 항상 업데이트되지 않는 동적 툴팁에 문제가 있었습니다.예를 들어, 저는 다음과 같은 일을 하고 있었습니다.

이것은 일관되게 동작하지 않았다.

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div>

이렇게 활성화:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

단, 사람 배열이 바뀌기 때문에 툴팁이 항상 업데이트되지는 않습니다.나는 이 실과 다른 실과 다른 실의 모든 수정을 시도했지만 운이 없었다.결함 발생률은 5%에 불과한 것으로 보여 반복이 거의 불가능했습니다.

유감스럽게도 이러한 툴팁은 제 프로젝트에 매우 중요하기 때문에 잘못된 툴팁을 표시하는 것은 매우 나쁠 수 있습니다.

무엇이 문제인 것 같았습니까?

이 "Discription"의을 복사하고 .title인 "New attribute 、、 성 、 property property property property property 。data-original-title합니다.title(때로는) 툴팁을 활성화 할 때 속성을 선택합니다.의 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.title={{ person.tooltip }}한다고 해서 은 아닙니다.data-original-title것그런데 이 두가 다통하지 않거나 냈습니다.title ★★★★★★★★★★★★★★★★★」data-original-title개체에서 제거되거나 바인딩 해제되는 특성입니다.

어떤 점이 효과가 있었나?

아마 내가 지금까지 했던 것 중 가장 추악한 코드일 것이다. 하지만 그것은 나에게 작지만 실질적인 문제를 해결해 주었다.툴팁이 새로운 데이터로 갱신될 때마다 다음 코드를 실행합니다.

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

여기서 일어나는 일은 본질적으로 다음과 같습니다.

주세요.그러면 1500밀리초)가 됩니다.title를 갱신합니다.
title있지 된 속성)으로하십시오.data-original-title부트스트랩
툴팁 재활성화

이 긴 답변이 저처럼 힘들었던 사람에게 도움이 되길 바랍니다.

툴팁(ui.bootstrap.tooltip)을 사용해 보겠습니다.부트스트랩의 각도 지시 참조

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

Angular 상단에 JavaScript 코드를 사용하지 않는 것이 좋습니다.JS

모델이 바뀌었을 때 툴팁을 새로 고치기 위해, 저는 단순히data-original-title대신title.

예.

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

다음과 같은 툴팁 사용을 초기화합니다.

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

버전:

AngularJS 1.4.10
부트스트랩 3.1.1
jquery: 1.11.0

Angular Strap은 angularjs 버전 1.2.9와 함께 IE8에서 동작하지 않으므로 응용 프로그램이 IE8을 지원해야 할 경우 사용하지 마십시오.

impproving @aStewartDesign 답변:

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

농담은 필요 없어요.늦은 답변이지만 1위이기 때문에 이 점을 지적해야 한다고 생각했습니다.

의존관계 설치:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

다음으로 angular-cli.json에 스크립트를 추가합니다.

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

그런 다음 script.script를 만듭니다.

$("[data-toggle=tooltip]").tooltip();

서버를 재기동합니다.

툴팁 기능 때문에 각을 알려줘야 합니다.jQuery를 사용하는 JS.

지시사항은 다음과 같습니다.

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

디렉티브를 사용하는 방법은 다음과 같습니다.


<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>

언급URL : https://stackoverflow.com/questions/20666900/using-bootstrap-tooltip-with-angularjs

'source' 카테고리의 다른 글

ng-form을 사용한 각도 ng-repeat, 컨트롤러에서의 검증 접근 (0)	2023.03.29
JSX에서 문자열 일부를 태그로 바꿉니다. (0)	2023.03.29
이 오류 메시지에서 '이 변수를 useEffect 안쪽으로 직접 이동'한다는 것은 무엇을 의미합니까? (0)	2023.03.29
어떻게 하면 워드프레스에서 데이터베이스 이름을 얻을 수 있습니까? (0)	2023.03.29
"대신 매핑된 개체 유형을 사용하는 것을 고려하십시오." - 매핑된 개체 유형은 무엇이며 여기서 어떻게 사용합니까? (0)	2023.03.29

현재글Angular를 사용한 부트스트랩툴팁 사용JS

각종 프로그래밍 정보를 다루는 블로그입니다.

JSON, spring-boot, Excel, IOS, angularJS, WPF, html, MongoDB, Windows, ajax, PowerShell, Git, Wordpress, reactjs, sql-server, Oracle, Swift, TypeScript, String, Objective-C,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

myloves

Angular를 사용한 부트스트랩툴팁 사용JS

Angular를 사용한 부트스트랩툴팁 사용JS

플런커에서의 데모

UI 부트스트랩 회피

스택에서의 데모 스니펫

툴팁을 동적으로 할당하는 경우에만 읽어주세요.

이것은 일관되게 동작하지 않았다.

무엇이 문제인 것 같았습니까?

어떤 점이 효과가 있었나?

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

Angular를 사용한 부트스트랩툴팁 사용JS

Angular를 사용한 부트스트랩툴팁 사용JS

플런커에서의 데모

UI 부트스트랩 회피

스택에서의 데모 스니펫

툴팁을 동적으로 할당하는 경우에만 읽어주세요.

이것은 일관되게 동작하지 않았다.

무엇이 문제인 것 같았습니까?

어떤 점이 효과가 있었나?

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바