Question

我使用Visual Studio 2013并制作Web项目（在C＃MVC5中）。我添加了bootstrap tolltip

$("a").tooltip({    
    animated: 'fade',
    placement: 'right',
    html: true,
    delay: { show: 750, hide: 100 },
});
});

标题代码

<td style="width:200px;">
<a href="@Url.Action("Szczegoly", new { id = item.TowarId })"
data-toggle="tooltip"
title="
  <div style='position:relative'>
  <img src='@item.FotoUrl' class='imgTooltip' />
  <span style=' position:absolute; top:0; font-size:25px;'>
  @Html.DisplayFor(modelItem => item.Nazwa)
  </span>
  <span style='text-align: right; position:absolute; 
  bottom:0; right:0; font-size:25px;'>
  @Html.DisplayFor(modelItem => item.Cena)
  </span>
  </div>
">
<img src="@item.FotoUrl" alt="@item.Nazwa" class="img-thumbnail" style="width:150px;height:auto;box-shadow: 5px 5px 5px #888888;"/>
</a>
</td>

它看起来像是：

我想在工具提示中添加链接，因此鼠标不应该在工具提示上消失。

知道我该怎么办？

这不是商业项目，我是为了通过一个项目学校（它是我的网上商店的一部分）。

Answer 1

您需要使用属性data-html="true"

所以：

data-toggle="tooltip"
data-html="true"

Answer 2

好的，我找到问题的解决方案，但我使用popover而不是工具提示。

<script>
  $(document).ready(function () {
   $("a.apop").popover({
    animation: false,
    placement: 'right',
    html: true,
    delay: { show: 750, hide: 100 },
    container: $(this).attr('id'),
    content: function () {
    $return = '<div class="hover-hovercard"></div>';
    }
    }).on("mouseenter", function () {
      var _this = this;
      $(this).popover("show");
      $(this).siblings(".popover").on("mouseleave", function () {
      $(_this).popover('hide');
    });
    }).on("mouseleave", function () {
      var _this = this;
      setTimeout(function () {
      if (!$(".popover:hover").length) {
      $(_this).popover("hide")
      }
    }, 100);
  });
 });
</script>

Answer 3

您也可以使用手动触发的工具提示，如果鼠标未悬停在目标元素或工具提示上，则关闭它。

在 mouseleave 事件中在此 page 上找到的示例的摘录。

带有手动触发器的工具提示

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-trigger="manual" data-bs-html="true" title="<h3>Tooltip</h3> <p>This tooltip will not close if you hover over the button or this tooltip</p>">
Button with a tooltip persistent on tooltip hover
</button>

javascript

// A variable to see if the mouse is over the target element
let hoverTargetElement = false;
// The jobId that is returned from the setIntervall
let jobId = null;
$(`[data-bs-toggle="tooltip"]`)
    .tooltip()
    .on("mouseenter", function () {
        $(this).tooltip("show");
        hoverTargetElement = true;
    })
    .on("mouseleave", function () {
        // the mouse is no more hover the target element (ie the button)
        hoverTargetElement = false;
        // if the jobId is not null, there is a job running
        if (jobId == null) {
            // keep a pointer to the target element used in the job function
            let _this = this;
            // Create the job function that will run ever 100 ms.
            jobId = setInterval(function () {
                if ($(".tooltip:hover").length === 0 && hoverTargetElement === false) {
                    $(_this).tooltip("hide")
                    clearInterval(jobId);
                    jobId = null;
                }
            }, 100);
        }
    });

如何在bootstrap工具提示中建立链接

3 个答案: