풍선도움말 popover가 둘다 안되는데 왜 그럴까요? 팝오버를 넣고부터 드롭다운도 안됩니다. ㅜㅜ
글쓴이: 익명 사용자 / 작성시간: 목, 2017/06/08 - 7:13오후
부트스트랩 navbar를 쓰는데 풍선도움말(tooltip)이 어느 순간부터 안돼서(하나의 도움말만 나오거나 navbar가 깨지면서 여기 저기 세로쓰기 형태로도 나오고,,,), 그래서 navbar를 정비한 다음 popover로 바꿨습니다. 그런데도 안나오네요.
대신 제가 html에서 콘솔로 현재의 url을 메시지로 보내고 있는데 마우스가 콤포넌트를 건드리면 화면 귀퉁이에 그 내용이 나옵니다.
최종 상황은..., 지금은 드롭다운도 안됩니다.
이클립스에서 웹서버로 보면 드롭다운이 잘 되는데(거기서도 팝오버는 안됩니다.), 크롬에서 해면 메뉴도 안열리고 팝오버도 안보입니다.
혹시 팝오버와 드롭다운을 같이 못쓰나요? 도와주세요. 정말 미치겠습니다.
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Photolog::{% block title %}{% endblock %}</title> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- '17.06.08 Iee --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- '17.06.08 Iee --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- '17.06.08 Iee --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.1/css/fileinput.min.css" type="text/css" media="screen" title="photolog" charset="UTF-8" /> <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}" type="text/css" media="screen" title="photolog" charset="UTF-8" /> <link rel="stylesheet" href="{{url_for('static',filename='css/font-awesome.min.css')}}" type="text/css" media="screen" title="photolog" charset="UTF-8" /> <link rel="stylesheet" href="{{url_for('static',filename='css/jasny-fileinput.css')}}" type="text/css" media="screen" title="photolog" charset="UTF-8" /> <link rel="stylesheet" href="{{url_for('static',filename='css/style.css')}}" type="text/css" media="screen" title="photolog" charset="UTF-8" /> <link rel="stylesheet" href="{{url_for('static',filename='css/placeholder-error.css')}}" type="text/css" media="screen" title="photolog" charset="UTF-8" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type="text/javascript" src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script> <script type="text/javascript" src="{{url_for('static',filename='js/bootbox.min.js')}}"></script> <script type="text/javascript" src="{{url_for('static',filename='js/jasny-fileinput.js')}}"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="{{url_for('static',filename='js/gmaps.js')}}"></script> <script type="text/javascript" src="{{url_for('static',filename='js/exif.js')}}"></script> <script type="text/javascript" src="{{url_for('static',filename='js/binaryajax.js')}}"></script> <!--<script $(document).popover() {tri'show'){ $('[data-toggle="popover"]').popover( {container: "body"}) ; </script> --> <!-- '17. 5.29 Iee --> <script> $(document).ready(function() { $('[data-toggle="popover"]').popover({container: "body"}); }); $('.dropdown-toggle').dropdown() </script> <!-- '17. 6. 8 Iee --> <!-- <script $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip( {delay: { "show":0, "hide":111000 }); }); </script> --> <!-- '17. 5.29 Iee --> {% block head %}{% endblock %} </head> <body width="100%"> <!----------- current page ------------------> <script type="text/javascript"> console.log(" start of layout"); console.log(location.href); console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"); </script> <!-- Navbar start ================================================================================================--> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <!-- fluid 좌우로 꽉 찬/container 고정폭 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <!-- screen reader only - to hide info intended only for screen readers from the layout of the rendered page.--> <span class="fa fa-bar"></span> <!-- span 시작한 후 <i> 태그를 사용하여 어디서든 글꼴 썸네일 아이콘을 배치 할 수 있습니다. --> <span class="fa fa-bar"></span> <span class="fa fa-bar"></span> </button> <a class="navbar-brand" style="color:#ffff00;" href="{{url_for('photolog.index')}}"> <i class="fa fa-picture-o" data-toggle="popover" data-container="body" data-placement="top" title="하남지사의 IWS" data-content="BMS 하남지사의 Intelligence Workshop System입니다." data-trigger="hover"> </i> <B>BMW하남</B> </a> <!-- Web Site Brand --> <!-- <a class="navbar-brand" style="color:#ffff00;" href="{{url_for('photolog.index')}}"> <i data-toggle="popover" data-placement="top"class="fa fa-picture-o" ></i>SMeMap</a> --> </div> <!-- Navbar start ======================== 파일 수신 종료 =============================================================--> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <!-- <li class="active"><a href="{{url_for('photolog.upload_photo_form')}}" ><i class="fa fa-camera-retro fa-large" data-toggle="popover" data-placement="top" > </i><B> 정보 관리 </B></a></li> --> <li class="active"><a href="{{url_for('photolog.upload_photo_form')}}" ><i class="fa fa-camera-retro fa-large" data-toggle="popover" data-container="body" data-placement="bottom" title=" " data-content="카메라와 서버 간의 데이타 통신 중지" data-trigger="hover"></i> 정보 관리 </a></li> <!-- Navbar start ======================= 관리/설정 ==================================================================--> <li class="dropdown"> <a class="dropdown_toggle" data-toggle="dropdown" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-map-marker fa-large" data-container="body" data-placement="top" title="관리자를 위한 메뉴" data-content="각종 설정 및 등록과 같은 관리자가 사용하는 기능"> </i> <data-trigger="hover"> <B>관리/설정</B> <span class="caret"> </span></a> <!-- <a class="dropdown_toggle" data-toggle="dropdown popover" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-map-marker fa-large" data-container="body" data-placement="top" title="관리자를 위한 메뉴" data-content="각종 설정 및 등록과 같은 관리자가 사용하는 기능"> </i> <data-trigger="hover"> <B>관리/설정</B> <span class="caret"> </span></a> --> <ul class="dropdown-menu"> <li><a class="ddmenu" href="{{url_for('photolog.upload_photo_form')}}"> <i class="fa fa-map-o fa-large" data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="좌표, 위/경도, 주소 입력 등 현재 위치 설정"> </i> <data-trigger="hover"> 지도 설정</a></li> <li><a class="ddmenu" href="{{url_for('photolog.upload_photo_form')}}"> <i class="fa fa-map-o fa-large" data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="설정 위치 인근에 설치될 카메라 일반사항의 등록"></i> <data-trigger="hover"> 카메라 등록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.upload_photo_form')}}"> <i class="fa fa-map-o fa-large" data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="지도 상 표기할 각종 아이콘 선정"></i> <data-trigger="hover"> 아이콘 등록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.upload_photo_form')}}"> <i class="fa fa-map-o fa-large" data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="운행 파악시 문자 연락을 해야 하는 유의 차량 등록"></i> <data-trigger="hover"> 유의차량 등록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.upload_photo_form')}}"> <i class="fa fa-map-o fa-large" data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="유의 차량 운행시 문자 연락 대상자 등록"></i> <data-trigger="hover"> SMS수신처 등록</a></li> <!-- data-container="body" data-placement="top" title="관리자를 위한 메뉴" data-content="각종 설정 및 등록과 같은 관리자가 사용하는 기능"> </i> <B>관리/설정</B> <span class="caret"> |</span></a> --> <!-- <a class="dropdown_toggle" data-toggle="dropdown" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-map-marker fa-large" > </i> <B>관리/설정</B> <span class="caret"></span></a> <li><a class="ddmenu" href="{{url_for('photolog.upload_photo_form')}}"> <i class="fa fa-map-o fa-large" ></i> 지도 설정</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}"><i class="fa fa-map-o fa-large"></i> 카메라 등록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-map-o fa-large"></i> 아이콘 등록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-map-o fa-large"></i> 유의차량 등록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-map-o fa-large"></i> SMS수신처 등록</a></li> --> </ul> </li> <!-- Navbar start ======================= 조회/통계 ==================================================================--> <li class="dropdown"> <a class="dropdown_toggle" data-toggle="dropdown" href="{{url_for('photolog.show_all')}}" ><i class="fa fa-th-list fa-large" data-container="body" data-placement="top" title="특정 시점, 기간 중 자료 관리" data-content="특정 시점의 또는 특정 기간 중의 출입차량에 대한 리포트"></i> <B> 각종 조회 </B> <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" class="fa fa-th-list fa-large"> <i data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="당일의 출입 차량 목록" ></i> <data-trigger="hover"> 출입차량 목록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" class="fa fa-th-list fa-large"> <i data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="현재 사내에 남아있는 차량의 목록"></i> <data-trigger="hover"> 잔류차량 목록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" class="fa fa-th-list fa-large"> <i data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="기간 중 출입 횟수가 많은 차량 중 상위 n대" ></i> <data-trigger="hover">출입회수 별 </a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" class="fa fa-th-list fa-large"> <i data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="기간 중 체류시간이 긴 차량 중 상위 n대 " ></i> <data-trigger="hover">체류시간 별</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" class="fa fa-th-list fa-large"> <i data-toggle="popover" data-container="body" data-placement="right" title=" " data-content="입고 후 장기 체류 중인 차량 중 상위 n대" ></i> <data-trigger="hover"> 장기체류 차량</a></li> <!-- <a class="dropdown_toggle" data-toggle="dropdown" href="{{url_for('photolog.show_all')}}" ><i class="fa fa-th-list fa-large"></i> <B>조회/통계 </B> <span class="caret"></span></a> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-th-list fa-large"></i> 출입차량 목록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-th-list fa-large"></i> 잔류차량 목록</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-th-list fa-large"></i> 출입회수 별 </a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-th-list fa-large"></i> 체류시간 별</a></li> <li><a class="ddmenu" href="{{url_for('photolog.show_map')}}" ><i class="fa fa-th-list fa-large" ></i> 장기체류 차량</a></li> --> </ul> </li> </ul> <!-- Navbar start ======================== 우측 사용자전환/종료 ========================================================================--> <ul class="nav navbar-nav navbar-right "> <li><a href="{% if session.__contains__('user_info') %}{{url_for('photolog.update_user_form', username=session.user_info.username)}} {% endif %}"> <i class="fa fa-pencil" data-toggle="popover" data-container="body" data-placement="top" title=" " data-content="사용자 정보의 등록/수정/삭제 등"> </i><data-trigger="hover"><B> 정보 수정 </B></a></li> <li><a id="logout" href="#" class="navbar-link"><i class="fa fa-user" data-toggle=popover data-container="body" data-placement="top" title=" " data-content="Log off 및 다른 사용자로 log in"></i><data-trigger="hover"><B> SMeMap 종료</B></a></li> <!-- <li><a href="{% if session.__contains__('user_info') %}{{url_for('photolog.update_user_form', username=session.user_info.username)}} {% endif %}"><i class="fa fa-pencil"></i><B> 정보 수정</B></a></li> <li><a id="logout" href="#" class="navbar-link"><i class="fa fa-user" ><B>SMeMap 종료</B></a></li> --> </ul> <!-- Navbar start ======================== 검색 Button ========================================================================--> <!-- search form ------------------------------------ --> <form role="form" class="form-inline navbar-form pull-left" action="{{url_for('photolog.search_photo')}}" method="POST"> <div class="input-group" style="margin-top: 2px;"> <input type="text" name="search_word" class="form-control input-sm search-form" placeholder="검색 차량 정보" {% if search_word %} value='{{search_word}}' {% endif %}> <span class="input-group-btn"> <button class="btn btn-primary btn-sm search-btn" type="submit"> <i class="fa fa-search" ></i> </button> </span> </div> </form> <!-- /.search-form --> </div> <!-- /.nav-collapse --> </div> <!-- /.container --> </nav> <!-- content--------------------------------------------------------> <div id="photolog-content" class="col-md-12" style="padding-top: 0px; padding-bottom: 30px;"> {% block content %}{% endblock %} </div> <!-- end of content------------------------------------------------->
File attachments:
| 첨부 | 파일 크기 |
|---|---|
 navbar에 상단 메뉴가 있고, 선택하면 하위 메뉴가 열리는 드롭다운 메뉴입니다. 팝오버를 넣고 부터 크롬에서 드롭다운이 안열립니다. | 18.91 KB |
 이클립스에서 실행.jpg | 30.37 KB |
Forums:
해결됐습니다.
tooltip 관련 문장 - data-toggle, data-placement, title - 을 href 밑으로 옮겼더니 잘 보이네요.
원래는 glyphycon 밑에 있었는데 옮기니까 해결됐습니다.
좀 찜찜하지만, 일단 해결됐으니... -.-
그런데 이제 마지막으로 뜬 dropdown menu가 마우스를 옮겨도 안 없어집니다.
bootstrap 이용하기 참 어렵네요. ㅜㅜ
tooltip 위치도 조정이 안되고..., 배경을 노란색으로 하려는데 그것도 잘 안되고...
submenu hover만 듣네요.
꼰대한테, 웹은 너무 어려운 것 같아라....
-.-
댓글 달기