时间戳

首页 > 解决方案 > 导入 Bootstrap 时 HTML 工具提示不起作用

html - 导入 Bootstrap 时 HTML 工具提示不起作用

问题描述

我想使用 HTML 工具提示并从引导程序中导入一些功能。问题是当我添加：

        <link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>

工具提示不再起作用。我在 eXist-db 中工作并使用 exide，这是我的 HTML 代码：

        <html xmlns="http://www.w3.org/1999/xhtml">

<meta charset="utf-8"/>
<title data-template="config:app-title"> ...</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta data-template="config:app-meta"/>
        <link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
        <link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
        <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
        <script type="text/javascript" src="$shared/resources/scripts/jquery/jquery-1.7.1.min.js"/>
        <script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>
        <script type="text/javascript" src="$shared/resources/scripts/bootstrap-3.0.3.min.js"/>
  <html>
<head>  

<style>
.tooltip {
  position: relative;
  
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  width: 240px;
  bottom: 110%;
  left: 20%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  visibility: visible;
  
}
</style>
</head>
    <body id="body">

        <div style="width: 20%; height: 90px; float: left; margin:10px">
        <h4>Original Text:</h4>
        <div data-template="letter:text_orig"/>
        </div>

    </body>
    
    </html>
</html>

这是我使用工具提示的 letter.xql：

declare function letter:text_orig($node as node(), $model as map())
{
    let $resource := collection('/db/apps/Tobi-oshki/data')
    let $xml_id := letter:text_people('/db/apps/Tobi-oshki/data')
    for $rs in $resource//tei:rs
    for $id in $xml_id
        return
            if (data($rs/@key) eq $id) 
            then 
                <html>
                <div class="tooltip">{$rs}
                <span class="tooltiptext">{letter:text_lem(data($rs/@key))}</span>
                </div>
               </html>
            else
                ("")

};

标签： htmlexist-db

解决方案

我建议不要依赖随附的引导程序版本shared-resources（自存在 v 5.3.0 以来已弃用）它已过时且未维护。

我建议打包您自己喜欢的依赖项和 css。作为最后的手段，您可以尝试用更高版本替换共享资源中的 js 和 css 文件，看看是否能解决您的问题。

推荐阅读