кнопка закрытия для плагина всплывающей подсказки jquery qtip - PullRequest
Новая
       3

кнопка закрытия для плагина всплывающей подсказки jquery qtip

2 голосов
/ 28 сентября 2011

Я пытаюсь использовать кнопку закрытия в подсказке qTip - у меня есть следующее: 

 <script type="text/javascript">
        $(document).ready(function () {

            //****** tooltips **********
            $('img.help').hover(function () {

          // Destroy currrent tooltip if present
          if ($(this).data("qtip")) $(this).qtip("destroy");

          $(this) // Set the links HTML to the current opposite corner
            .qtip({
                content: 
                {
                    text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page', 
                        title: {
                        text: 'This toolip title',
                        button: true
                        }
                },
                position: {
                    corner: {
                        tooltip: 'bottomLeft', // Use the corner...
                        target: 'topRight' // ...and opposite corner
                    }
                },
                show: {
                    solo: true,
                    when: false, // Don't specify a show event
                    ready: true // Show the tooltip when ready
                },
                hide: false, // Don't specify a hide event
                style: {
                    border: {
                        width: 5,
                        radius: 10
                    },
                    padding: 10,
                    textAlign: 'left',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'blue' // Style it according to the preset 'cream' style
                    // name: 'light' // Style it according to the preset 'cream' style
                }
            });


      });

однако у меня нет кнопки закрытия. В моей папке изображений должно быть изображение или стиль, созданный для этого? Все, что я вижу в документации здесь , это указание кнопки: true. Я пробовал кнопку «закрыть», и это создает гиперссылку «закрыть», как и должно быть - просто не могу заставить работать вариацию близкого изображения. Есть идеи о том, чего мне здесь не хватает?

Ответы [ 3 ]

3 голосов
/ 19 января 2012

Это мое решение, я хотел, чтобы действие java закрывало qtip, когда я нажимал кнопку 

    <input type="button" name="calendar_main_delete" class="calendar_main_delete"  id="calendar_main_delete" value="Delete Event" />
              <input type="button" onClick="parent.location='#edit'" value="Edit Event" />



       <script type="text/javascript">

//click button call from button above
$('.calendar_main_delete').click(function() {

//.qtip is my qtip element from the parent page and then I hide it.
$('.qtip', window.parent.document).qtip("hide");
});
</script>
2 голосов
/ 09 декабря 2016

qTip 2 имеет опцию кнопки закрытия.Добавьте кнопку выбора рядом с контентом, и это добавит кнопку закрытияПозиционирование может быть сделано с помощью CSS.Приведенный ниже фрагмент кода поможет вам начать работу. 

$item.qtip({
    overwrite: true,
    content: {
        text: content,
        button: 'Close'
    }
});

Если вам нужна дополнительная информация по этому вопросу, обратитесь к следующему: http://qtip2.com/options. Найдите на странице «content.button».

1 голос
/ 28 сентября 2011

Я не уверен, что это то, что вы ищете, но из того, что я вижу, кнопка закрытия на демонстрационной странице - это не изображение, а стиль с помощью css: 

.ui-tooltip-icon .ui-icon {
    background: none no-repeat scroll -100em -100em transparent;
    color: inherit;
    font: bold 10px/13px Tahoma,sans-serif;
    height: 14px;
    text-align: center;
    text-indent: 0;
    width: 18px;
    border-radius: 3px 3px 3px 3px;
}

И HTML это: 

<span class="ui-icon ui-icon-close">×</span>

Надеюсь, это было полезно!

...