带有x可编辑插件的引导工具提示

Bootstrap tooltip with x-editable plugin

本文关键字:工具提示 插件 编辑 带有      更新时间:2023-09-26

我正在尝试将工作工具提示和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可编辑的插件属性时,看起来像这个

  <?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可编辑插件不起作用,当我删除它时,可编辑插件起作用,但工具提示不起作用。知道这个bug是从哪里来的吗?

插件链接

我在x-editable和引导工具提示之间也有冲突。在阅读了Bootstrap工具提示数据切换的信息后,我决定尝试以下工具提示选择器。

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

这与x-editable插件配合得很好,因为您可以指定数据标题作为选项之一。例如

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

您只需要确保更新了对上一个工具提示选择器的所有引用。

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

以下是固定代码。

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>