Hover текст и показать HTML таблицу

Поэтому в основном я хочу некоторый текст, чтобы показать таблицу при наведении курсора мыши на него, им с помощью этого основного кода JQuery/CSS:Hover текст и показать HTML таблицу

<meta charset="utf-8" /> 
<title></title> 
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link href="/resources/demos/style.css" rel="stylesheet" /> 
<script> 
    $(function() { 
    $(document).tooltip(); 
    }); 
    </script> 
<style type="text/css"> 
label { 
    display: inline-block; 
    width: 5em; 
    }</style> 
<p> 
    <a href="#" title="I want the below table to be hovered here">Table</a> to be hovered</p>

И это HTML таблица что я хотел бы показать при наведении курсора на текст:

HTML:

<table border="4" bordercolor="black" cellpadding="15px" cellspacing="1" style="width: 800px;"> 
    <tbody> 
     <tr> 
      <td> 
       <h1> 
        <b style="list-style-type: disc; margin-left: 25px; margin-right:5px">This is my table</b></h1> 
       <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px"> 
        <li> 
         <h1> 
          This is my first point</h1> 
        </li> 
        <li> 
         <h1> 
          This is my second point</h1> 
        </li> 
       </ul> 
      </td> 
     </tr> 
    </tbody> 
</table>

Я, очевидно, пытался просто заменить мой «Я хочу, чтобы в таблице ниже, чтобы быть парили здесь» с моей простой HTML таблицы, но это не за работой. Поэтому мне почему-то нужно позвонить в таблицу, но я мог бы сделать таблицу в любом случае.

источник

2016-01-08 Deusdeorum

Вы уже, кажется, с помощью всплывающей подсказки плагина, почему не помещать таблицу в всплывающую подсказку и создавать экземпляр плагина на элементе, содержащем текст? –

Почему вы отметили 'themeroller', но не' jquery-ui'? Это часть jquery-ui: http://jqueryui.com/tooltip/ –

@RoryMcCrossan да, мой плохой, im, используя простую подсказку jquery ui, но я не слежу за вашим предложением, хотя в подсказке, как в заголовке = «? – Deusdeorum

Это легко: в вашем HTML: добавить Id давало элемента так:

<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>

После, добавьте второй элемент идентификационных для вашего стола, и скрыть его (с: style: display: none):

<table id="myContentHover" border="4" bordercolor="black" cellpadding="15px" cellspacing="1" style="width: 800px;display:none">  </table>

И, наконец, u Функция себе только Jquery TOOLTIP «s для отображения таблицы, когда ваш„myHoverTitle“HTML на парении:

$(function() { $('#myHoverTitle').tooltip({ content: $('#myContentHover').html() }); });

Это Javascript создать„название“на своем элементе„myHoverTitle“с содержанием из элемент «myContentHover»! У вас есть официальная документация JQueryUI tooltip here.

Кроме того, вы можете удалить содержимое атрибута, указанного в заголовке в по элементу, он становится бесполезным:

<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>

To:

<a href="#" id="myHoverTitle" title="">Table</a>

Надежда я помочь вам.

источник

2016-01-08 12:43:23

Одна ошибка: не удаляйте атрибут title, просто удаляйте содержание атрибута title (я редактирую свой пост) и две ошибки: Когда вы создаете идентификатор, вы не используете символ «#» в своем HTML! ;-) это не 'ID =«# myHoverTitle»' но это 'ID =«myHoverTitle» –

Заменить также' 'Table на' 'Table как мой образец ;-) –

Хорошо, это странно, когда я проверяю на мой localHost, которые работают с вашим кодом! Я просто заменяю код 'src =" //. [...] 'by' src = "http: // code. [...]' на все теги

Простое объяснение - оберните таблицу в div и дайте ей идентификатор типа «hide_this_table», затем вы можете

</script> 

// start by hiding the div containing the table 
$('#hide_this_table').hide(); 

// bind hover event 
$('#some_text_id').hover(function() { // First function is a callback for the mouse over event 
    $('#hide_this_table').show(); 
}, function() {      // This second function is a callback for the mouse out event - you can remove it if you don't need it. 
    $('#hide_this_table').hide(); 
}); 

</script> 


<p id='some_text_id'>Show hidden table</p> 

<div id="hide_this_table"> 
    <table> 
     <tr> 
      <th>Sex</th> 
      <th>DOB</th> 
     </tr> 
     <tr> 
      <td>Male</td> 
      <td>1995</td> 
     </tr> 
    </table> 
</div>

попробовать его ...

источник

2016-01-08 11:58:40

Позвольте мне обновить приведенный выше код, чтобы включить более простой подход. @honorem –

изменить ваши JS как

$(document).ready(function(){ 
    $("#demoTable").hide(); 
    $("#demo").mouseover(function() { 
     $("#demoTable").show(); 
    }); 
    $("#demo").mouseout(function() { 
     $("#demoTable").hide(); 
    }); 
});

и добавить идентификатор к тегу и таблица затем обернуть их в DIV, как это

<div> 
    <p><a id="demo" href="#" title="I want the below table to be hovered here">Table</a> to be hovered</p> 
    <table id="demoTable" border="4" bordercolor="black" cellpadding="15px" cellspacing="1" style="width: 800px;"> 
     <tbody> 
      <tr> 
       <td> 
        <h1><b style="list-style-type: disc; margin-left: 25px; margin-right:5px">This is my table</b></h1> 
        <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px"> 
         <li> 
          <h1>This is my first point</h1> 
         </li> 
         <li> 
          <h1>This is my second point</h1> 
         </li> 
        </ul> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>

источник

2016-01-08 12:15:35

вы можете поделиться своей ошибкой, чтобы мы могли ее исправить ... –

Измените JS как этого

$.widget("ui.tooltip", $.ui.tooltip, { 
    options: { 
     content: function() { 
      return $(this).prop('title'); 
     } 
    } 
}); 

$(function() { 
    $('.tblhover').attr('title', $('.tblcontent').remove().html()) 
    $(document).tooltip(); 
});

затем добавить класса в (якорный тег и тег таблицы) в соответствии с ниже HTML кода

<a class="tblhover" href="#">Hover me</a> 
<table class="tblcontent" border="4" bordercolor="black" cellpadding="15px" cellspacing="1"> 
    <tbody> 
     <tr> 
      <td> 
       <h1><b style="list-style-type: disc; margin-left: 25px; margin-right:5px">This is my table</b></h1> 
       <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px"> 
        <li> 
         <h1>This is my first point</h1> 
        </li> 
        <li> 
         <h1>This is my second point</h1> 
        </li> 
       </ul> 
      </td> 
     </tr> 
    </tbody> 
</table>

источник

2016-01-08 12:55:48

Смежные вопросы