我将“工具提示文字”添加到“导航栏”上工作的“下拉菜单”中，但它无法正常工作。我不知道为什么，但同样的“工具提示文本”来自每个“锚”。
我不知道bootstrap，所以当我用“popover”代替“tooltip text”时，它会在“popover”和“dropdonw menu”之后才能工作。
更有趣的是“dropdonw菜单”在Eclipse中运行良好，但在Chrome浏览器中根本没有打开 它是。当然，如果您使用Web浏览器打开Eclipse打开它，下拉菜单效果很好。当然那里没有人气。 我实际上想要显示工具提示文本而不是弹出窗口。 为什么？我可以一起在导航栏中使用它们吗？
似乎很长，因为有很多评论，但html很短。菜单是韩文，所以请仔细阅读。感谢。
<!doctype html>
<html>
<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>
$(function() { $('.example-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 -->
<!-- $(document).ready(function() { $('[data-toggle="popover"]').popover({container: "body"}); }); -->
{% block head %}{% endblock %}
Ext.define('ext5.view.chapter7.BigDataGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.chapter7-bigdatagrid',
requires: [
'Ext.grid.column.RowNumberer',
'Ext.data.proxy.JsonP'
],
width: 700,
height: 280,
columnLines: true,
initComponent: function () {
var me = this;
var store = Ext.create('Ext.data.Store', { // #1
fields: [
{
name: 'title'
},
{
name: 'forumtitle'
},
{
name: 'forumid',
type: 'int'
},
{
name: 'username'
},
{
name: 'replycount',
type: 'int'
},
{
name: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter'
],
pageSize: 10,
buffered: true,
proxy: {
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
rootProperty: 'topics',
totalProperty: 'totalCount'
}
},
autoLoad: true
});
Ext.apply(this, {
dockedItems: [
{
dock: 'bottom',
xtype: 'pagingtoolbar', // #2
store: store
},
{
dock: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'component', // #3
itemId: 'status',
tpl: '전체 게시물 : {count}',
style: 'margin-left:15px'
}
]
}
],
store: store,
columns: this.getColumnConfig()
});
me.callParent(arguments);
me.store.on('datachanged', me.onStoreSizeChange, me); // #4
},
onStoreSizeChange: function () { // #5
this.down('#status').update({count: this.store.getTotalCount()});
},
getColumnConfig: function () {
var me = this;
return [
{
xtype: 'rownumberer',
width: 50,
sortable: false,
renderer: function (value, meta, record, row, col, store) {
// #6
return store.getTotalCount() - row - ((store.currentPage - 1) * store.pageSize);
}
},
{
text: "Topic",
dataIndex: 'title',
flex: 1,
sortable: false
},
{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: false
},
{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false
},
{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: false
}
];
}
});
</head>
<body width="100%">
<!-- 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="하남지사의 Intelligence Workshop System입니다."
data-trigger="hover"> </i> <B>하남</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------------------------------------------------->
<!-- footer begin -->
<!-- footer end -->
<script type="text/javascript">
$('#logout').click(function(e){
bootbox.confirm("로그아웃 하시겠습니까?", function(result) {
if(result){
window.location="{{url_for('photolog.logout')}}"
}
});
});
</script>
<!----------- current page ------------------>
</body>
</html>
答案 0 :(得分：0)
我已经在href下移动了工具提示相关数据（数据切换，数据放置，标题）。 最初，它是在glyphycon下，但我移动它。
这有点难，但它已经解决了一次...... - .- 但是现在移动鼠标，最后一个下拉菜单并不令人满意。 使用bootstrap非常困难。 TT
我无法调整工具提示的位置......我希望背景为黄色，但它不会改变颜色...... 只有子菜单悬停才有效。 -.- 感谢。