如何将参数传递给jquery以从html元素中的元素引导工具提示文本

我有以下简单的标记，它将鼠标悬停在正文中的按钮上时显示彩色引导工具提示。工具提示文本目前被硬编码到jquery函数中。我想通过按钮标记将工具提示文本传递给jquery函数。这个怎么做？（这最终将asp.net标记）如何将参数传递给jquery以从html元素中的元素引导工具提示文本

<html> 
<title>toolTips</title> 
<head> 

    <script type="text/javascript" src="jqueryScripts\jquery-2.1.0.js"></script>  
    <script type="text/javascript" src="jqueryScripts\bootstrap.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="jqueryScripts\bootstrap-combined.min.css">  

    <style type="text/css"> 
    .red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;} 
    .red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; } 
    </style> 

<script type='text/javascript'> 
$(
    function(){ 
     $('#userNameField').tooltip({  
      'placement': 'bottom', 
      'title': "...this is a test tooltip..." 
     }); 
}); 

</script> 

</head> 
<body> 
    <input type="submit" class="red-tooltip" id="userNameField" value="button1"> 
</body> 
</html>

来源

2016-08-12 Richard Protzel

您可以使用该title属性：

<input type="submit" class="red-tooltip" id="userNameField" value="button1" title="This is the actual tooltip">

这里是它如何工作的：

$(function(){ 
 
    $('#userNameField').tooltip({  
 
    'placement': 'bottom', 
 
    'title': "...this is a test tooltip..." 
 
    }); 
 
});

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;} 
 
    .red-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<input type="submit" class="red-tooltip" id="userNameField" value="button1" title="This is the actual tooltip">

引导的工具提示将采用title属性中的值作为工具提示。

来源

2016-08-12 21:05:43 Dekel

非常好。我也会试试这个。如果我想出的答案不适用于asp.net boundfields，也许这个会。非常感谢 –

刚刚尝试过这种技术 - 它也有效。非常高兴有各种各样的方式来完成某件事。 –

好吧，我想这里面似乎工作 - 添加这个脚本到脚本部分

$(document).ready(function() { 
     $('[data-toggle="tooltip"]').tooltip(); 
    });

，我增加了一个按钮，页面中使用这个脚本的时候，第一个按钮使用原始脚本：

<input type="submit" class="red-tooltip" value="button2" data-toggle="tooltip" data-html="true" data-placement="right" title='test button2'>

最终，我将这样做与asp.net boundfields - 试图摆脱runat =“服务器”控制。标题将从gridview中的#Eval ....中获取文本 - 具有不同标题内容的绑定字段的行。

来源

2016-08-12 21:39:30

如何将参数传递给jquery以从html元素中的元素引导工具提示文本

回答

相关问题