admin管理员组

文章数量:1377685

I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.

Here is my code:

    <div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>" 
       data-html="true" rel="tooltip" style="cursor:pointer;" 
       class="infobox infobox-red  infobox-dark  " onclick="OpenDetails(this)">
      <div class="infobox-icon"><i class="logo-box boa"></i></div>
      <div class="infobox-data"><span class="infobox-data smaller">BOA</span>
      <div class="infobox-content">(0/0/0/0 )</div>
      </div>
    </div>

    $(function () {
            $("[rel='tooltip']").tooltip();
        });    

    function OpenDetails(Obj){
     }

Thank you all in advance for your response.

I'm using bootstrap in my application. I'm trying to show a table of contents as tooltip using data-html="true". but its not working.

Here is my code:

    <div title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>" 
       data-html="true" rel="tooltip" style="cursor:pointer;" 
       class="infobox infobox-red  infobox-dark  " onclick="OpenDetails(this)">
      <div class="infobox-icon"><i class="logo-box boa"></i></div>
      <div class="infobox-data"><span class="infobox-data smaller">BOA</span>
      <div class="infobox-content">(0/0/0/0 )</div>
      </div>
    </div>

    $(function () {
            $("[rel='tooltip']").tooltip();
        });    

    function OpenDetails(Obj){
     }

Thank you all in advance for your response.

  • javascript
  • asp
  • c#-4.0
  • twitter-bootstrap
Share Improve this question edited Oct 28, 2013 at 9:01 Jason Evans 29.2k15 gold badges94 silver badges156 bronze badges asked Oct 28, 2013 at 8:14 DeepakDeepak 1953 gold badges6 silver badges17 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 4

using 

data-original-title

Html:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

Javascript:

$("[rel=tooltip]").tooltip({html:true});

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

using

<script>
  $(function () {
    $('[rel="tooltip"]').tooltip();
  });
</script>

at the end of the body tag (after jQuery and Bootstrap)

Aslo use

title="Column1 | Column2 <br> Value1 | Value2"

instead of

title="<table><tr><td>Column1</td><td>Value1></td><tr><td>Column2</td><td>Value</td></tr></table>"

the final version could be like this:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <div
      title="Column1 | Column2 <br> Value1 | Value2"
      data-html="true"
      rel="tooltip"
      style="cursor: pointer"
      class="infobox infobox-red infobox-dark"
      onclick="OpenDetails(this)"
    >
      <div class="infobox-icon"><i class="logo-box boa"></i></div>
      <div class="infobox-data">
        <span class="infobox-data smaller">BOA</span>
        <div class="infobox-content">(0/0/0/0 )</div>
      </div>
    </div>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery./jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
      crossorigin="anonymous"
    ></script>
    <script>
      $(function () {
        $('[rel="tooltip"]').tooltip();
      });
    </script>
    -->
  </body>
</html>

本文标签： javascriptbootstrap tooltip is not workingStack Overflow

版权声明：本文标题：javascript - bootstrap tooltip is not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744385085a2603699.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。