동일한 요소에 부트 스트랩 툴팁과 함께 팝업 표시

동일한 요소 (glyphicon-plus)에 부트 스트랩 팝업 및 툴팁을 적용하려고합니다. 작동하지 않습니다.동일한 요소에 부트 스트랩 툴팁과 함께 팝업 표시

<a href ="#"><span class = "pull-right glyphicon glyphicon-plus" tooltip-title = "Save a bookmark" popover-title = "Save your bookmarks here" popover-content = "abc"></span></a>

자바 스크립트 :

$(document).ready(function() { 
    $(this).popover({ 

    content : $(this).attr("popover-content"), 

    title : $(this).attr("popover-title")   
    }) 

    $(this).tooltip({ 

    placement : 'bottom', 

    title : $(this).attr("tooltip-title")   
    });  
});

사람이 작업을 수행하는 올바른 방법이 무엇인지 안내 수 있습니까?

출처

2017-11-02 Rashi Goel

https://getbootstrap.com/docs/3.3/javascript/#popovers ... 또는 코드에 기반하여 결코 확립되지 않는'$ (this)'정의에 따라 실제로 popover JavaScript를 초기화하는 것으로 시작할 수 있습니다. . –

@RobertC Ok 고마워 :)하지만 popover와 tooltip은 모두 초기화되어야합니다. –

우리가 두 개의 별도의 HTML 요소를 감안할 <a> 및 <span> 왜 하나의 tooltip 다른의 popover 트리거를 배치하지?

https://getbootstrap.com/docs/3.3/javascript/#tooltips

여기에 사용하는 두 개의 자바 스크립트 구성 요소가

가 수신 거부하고 당신의 위의 코드는 그들이 이제까지로드 할 것 초기화 누락되었습니다 물론, 당신은 또한 모두를 초기화해야합니다.

$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip({ 
 
    container: 'body', 
 
    html: false 
 
    }); 
 
    
 
    $('[data-toggle="popover"]').popover({ 
 
    container: 'body', 
 
    html: false 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<a href="#" data-toggle="tooltip" title="Save a Bookmark" data-placement="right"> 
 
    <span class="glyphicon glyphicon-plus" data-toggle="popover" data-placement="right" title="Save your bookmarks here" data-content="abc"></span> 
 
</a> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

는 또한 적절한 위치 및 정렬에 대한 container을 지정해야 당신이 HTML을 허용할지 여부를 중 (내 예제에서 false로 설정 한).

이 솔루션을 사용하면 data-placement을 위치 지정에 사용할 수 있으므로 동일한 배치를 사용하는 모든 툴팁 또는 팝업으로 제한 할 필요가 없습니다. 또한 트리거를 다른 요소로 분리했기 때문에 제목이나 내용과 같은 항목을 가져올 사용자 지정 데이터 속성을 만들지 않아도됩니다. 방금 표준 부트 스트랩 속성을 사용하고 있습니다.

출처

2017-11-02 16:16:55

고마워 :) –

동일한 요소에 부트 스트랩 툴팁과 함께 팝업 표시

답변

관련 문제