标签: tooltipster

我想使用Tooltipster插件来显示jQuery Validate插件生成的表单错误.

jQuery for Validate插件:

$(document).ready(function () {

    $('#myform').validate({ // initialize jQuery Validate
        // other options,
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

jQuery for Tooltipster插件:

$(document).ready(function () {

    $('.tooltip').tooltipster({ /* options */ });  // initialize tooltipster

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

我如何整合这两个jQuery插件的使用,以便验证错误出现在工具提示中？

有一个简单的图像地图,tooltip点击时可以输入area/输出map:

var $section = $('.plan');

$('.panzoom').panzoom({
  $zoomIn: $section.find(".zoom-in"),
  $zoomOut: $section.find(".zoom-out"),
  $zoomRange: $section.find(".zoom-range"),
  $reset: $section.find(".reset"),
  startTransform: 'scale(1)',
  increment: 0.1,
  minScale: 1,
  contain: 'invert',
  maxScale: 5,
  focal: {
    clientX: 0, 
    clientY: 0
  },
  onEnd: function(){
    X();
  }
}).panzoom('zoom', true);

$('map area').each(function(i,e){
		    // console.log( $(e).data('status') );

  var data = $(e).data('maphilight') || {};
  data.fillColor = 'db2205';

  switch( $(e).data('status') ){               

    case 'sales':
      data.fillColor = 'db2205';
      data.strokeColor = 'db2205';
      data.fillOpacity = 0.5;
      break;

    case 'free':
      data.fillColor = '98c13c';
      data.strokeColor = …

如果子元素包含某个类，是否有任何方法可以在 sass 中选择父元素？

基本上我正在使用 tooltipster 插件并遇到这个问题

HTML

<div class="tooltipster-content">
  <span id="note-options">
    <ul>
      <li>Create new note</li>
      <li>Add new edit note</li>
    </ul>
  </span>
</div>

CSS

#note-options {
   //From here, select the .tooltipster-content parent
     ul {
       li {

       }
     }
}

我需要能够.tooltipster-content根据 span 标签的 id选择类。

Tooltipster 将始终使用相同的 HTML 结构生成，但我不想更改所有工具提示的 tooltipster 包装器，我想针对每个工具提示进行更改。

由于 tooltipster 不会将您指定的 id 添加到用于基本 CSS 编辑的父包装器，我能想到的唯一方法是尝试使用跨度 ID 来选择最接近的.tooltipster-content类。

这是可以实现的吗？

注意 - 我不想使用 javascript/jquery 来解决这个问题，我想尝试在 CSS/SASS 中实现它。

我想在我的Asp.net MVC应用程序中使用JQuery Tooltipster.

我尝试添加工具提示的内容是通过JavaScript动态生成的.

视图:

    var engName = document.getElementsByClassName("dhx_matrix_scell");
    for (var i = 0; i < engName.length; i++) {
        engName[i].className = engName[i].className + " tooltip";
        engName[i].title = "Hello";
    }

我的索引顶部:

    $(document).ready(function () {
    $('.tooltip').tooltipster(
    {
         multiple: true
    });
});

工具提示确实有效,但它没有出现在正确的位置,并且它不显示使用工具提示类的元素.

图片供参考:

我最近尝试使用工具提示的新插件,因为我喜欢这个功能.但是我遇到了一个问题,我不知道如何添加新行,所以我的工具提示不会只是遍及整个页面.我尝试了一些我在这里读到的解决方案,比如转义字符,但它们不起作用.

$(document).ready(function () {		
	$('.tooltip-custom').tooltipster({
		theme: 'tooltipster-noir'
	});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/themes/tooltipster-noir.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.js"></script>

<a href="#" class="tooltip-custom" title="This is my very long run on tooltip that just doesnt seem to want to end or split lines. Ok maybe I am overreacting but still. I want to be able to start a new line whenever I please!"><h1>Hello!</h1></a>

我有一张桌子,在悬停在特定单元格上时,我需要根据悬停的单元格显示不同值的工具提示.

我想知道如何以Angular方式使用插件,我在现有设计中遇到问题.

问题:

- 它不会在第一次悬停时工作.

- 第二个悬停工具提示器仅显示它为所有单元格悬停的第一个值.值不会改变

- 它应该显示associateID与时间

 $scope.SwipeDataDetails = function (associateid) {               
                $('.tooltip').tooltipster({
                    content: $('<div class="swipePopup"><div class="arrowPop"></div><div class="swipePopDetails"><div class="swipeContent1 fLeft"><img src="../images/Swipe_in.png"/> Swipe-In Time</div><div class="swipeContent2 fRight">' + associateid + '10:00AM' + '</div></div><div class="swipePopDetails"><div class="swipeContent1 fLeft"><img src="../images/Swipe_out.png"/> Swipe-Out Time</div><div class="swipeContent2 fRight">' + associateid + '11:00AM' + '</div></div><div class="swipePopDetailsTotal"><div class="swipeContent1 fLeft">Total Swipe Hours</div><div class="swipeContent2 fRight">' + associateid + '1.0' + '</div></div></div>'),                        
                    position: 'left',
                    offsetX: 0,
                    multiple:true
                });
        };

在控制台中获取错误

Tooltipster: one or more tooltips are already attached to this element: ignoring. …

我正在使用这个插件http://iamceege.github.io/tooltipster/.

有可能知道HTML是否已经初始化了工具提示器？

我想知道,因为有时我需要更改工具提示的文本,为此,我需要销毁工具提示器,更改HTML对象的属性标题,然后再次初始化.像这样:

$(this).tooltipster('destroy').attr("title", data.fields[i].value).tooltipster();

我正在使用Tooltipster插件http://calebjacob.com/tooltipster/这很棒,但我已经动态生成了插入DOM的内容.似乎工具提示器正在检测那些因为它被设置为在文档就绪时触发.

我知道这是一个深奥的插件,但有关如何让插件适用于DOM中新创建的元素的任何想法？

谢谢

我正在尝试使用Tooltipster插件自定义用户获得的错误消息,并遇到以下问题:

您在未初始化的元素上调用了Tooltipster的"内容"方法

我的HTML代码:

<form>
  <input id="one" type="number" name="one" />
  <input id="two" type="number" name="two" />
  <button id="button" type="submit">Submit</button>
</form>

使用Javascript:

$(document).ready(function () {

            $('form').validate({ // initialize the plugin
                rules: {
                    one: {
                        required: true,
                        min: 1,
                        max: 100
                    },
                    two: {
                        required: true,
                        min: 50,
                        max: 80
                    }
                },
                submitHandler: function (form) {
                    doTest();
                    return false;
                },
                errorPlacement: function (error, element) {
                    var lastError = $(element).data('lastError'),
                        newError = $(error).text();

                    $(element).data('lastError', newError);

                    if (newError !== '' && newError !== lastError) …

如果我将工具提示绑定到输入元素和不同的元素(如div),有没有办法可以在一次调用中隐藏所有内容？

到目前为止,我知道我可以手动执行以下操作:

$('表格输入').tooltipster('hide'); $( '#mydiv')tooltipster( '隐藏').