Question

我试图一起制作工作提示和x可编辑插件

这是我的主打印代码

  <?php $Cvstate.="<a href=\"#\" id=\"cvstage\" style=\" text-decoration:none;\"  data-toggle=\"tooltip\" data-container=\"body\" data-placement=\"top\" data-original-title=\"{$row['idate']}\">Cv Send</a><br><br>" ;?>

当添加x-editable插件属性时，这个

  <?php $Cvstate .= "<a href=\"#vacancy\" id=\"cvstage\" style=\"margin: 15px; text-decoration:none;\" data-type=\"select\" data-pk=\"1\"  data-source=\"/groups\" data-value=\"{$row['id']}\" data-title=\"Select group\" data-toggle=\"tooltip\" data-container=\"body\" data-placement=\"top\" data-original-title=\"{$t['date']}\">Cv Send</a> <br>"; ?>

问题是当我向其添加data-toggle="tooltip"时，x-editable插件无法正常工作，当我删除它时，x-editable插件工作但工具提示不起作用。从这个bug到来的地方有什么想法吗？

Link to plugin

Answer 1

我在x-editable和bootstrap工具提示之间也存在冲突。在阅读Bootstrap tooltip data-toggle处的信息后，我决定尝试使用以下选择器来替换工具提示。

$("body").tooltip({
    selector: '[data-title]'});
});

这适用于x-editable插件，因为您可以指定 data-title 作为其中一个选项。 E.g。

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

您只需确保更新以前工具提示选择器的所有引用。

这将使您能够在同一元素上使用x-editable和bootstrap工具提示。

Answer 2

这是固定代码。

JS

$("body").tooltip({
    selector: '[data-title]'
});

HTML

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

带有x-editable插件的Bootstrap工具提示

2 个答案: