如何将div容器放入工具提示中

Question

我想使用ui-tooltip。但我不知道，如何在鼠标悬停时将id = test123的div容器转换为ui-tooltip。

＆＃13;

＆＃13;

$('.info-sign').tooltip({
  items: "[data-tooltip]",
  content: function() {
    return $(this).attr("data-tooltip");
  }
});

＆＃13;

.container {
  display: grid;
  grid-template-columns: 30% 68%;
  grid-gap: 10px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #c0c0c0;
  padding: 10px;
  display: none;
}

.container>div {
  background-color: #ffffff;
  padding: 5px;
}

.container header {
  background: #EAEAEA;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.container footer {
  background: #EAEAEA;
  grid-column-start: 1;
  grid-column-end: 3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="info-sign" data-tooltip="<p>ciao 1</p>">i1</div>
<div class="info-sign" data-tooltip="<p>ciao2</p>">i2</div>
<div class="info-sign">i3</div>

<div class="container" id="test123">
  <header>Überschrift</header>
  <div>Jahr</div>
  <div>Lorem ipsum dolor sit amet,consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit</div>
  <div>Jahr</div>
  <div>Beschreibung</div>
  <footer>Unterschrift</footer>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢您的帮助，Cap

Answer 1

你在找这个吗？

＆＃13;

＆＃13;

$('.info-sign').tooltip({
  items: "[data-tooltip]",
  content: function() {
    return $('#' + $(this).data('target')).html();
  }
});

＆＃13;

.container {
  display: grid;
  grid-template-columns: 30% 68%;
  grid-gap: 10px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #c0c0c0;
  padding: 10px;
  display: none;
}

.container>div {
  background-color: #ffffff;
  padding: 5px;
}

.container header {
  background: #EAEAEA;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.container footer {
  background: #EAEAEA;
  grid-column-start: 1;
  grid-column-end: 3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="info-sign" data-target="test1" data-tooltip="<p>ciao 1</p>">i1</div>
<div class="info-sign" data-target="test2" data-tooltip="<p>ciao2</p>">i2</div>
<div class="info-sign" data-target="test3" data-tooltip="">i3</div>

<div class="container" id="test1">
  <header>Überschrift</header>
  <div>Para 1</div>
  <div>Lorem ipsum dolor sit amet,consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit</div>
  <div>Jahr</div>
  <div>Beschreibung</div>
  <footer>Unterschrift</footer>
</div>

<div class="container" id="test2">
  <header>Überschrift</header>
  <div>Para 2</div>
  <div>Lorem ipsum dolor sit amet,consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit</div>
  <div>Jahr</div>
  <div>Beschreibung</div>
  <footer>Unterschrift</footer>
</div>

<div class="container" id="test3">
  <header>Überschrift</header>
  <div>Para 3</div>
  <div>Lorem ipsum dolor sit amet,consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit</div>
  <div>Jahr</div>
  <div>Beschreibung</div>
  <footer>Unterschrift</footer>
</div>

＆＃13;

＆＃13;

＆＃13;