How customize content modal tooltip?

[dannythegreat]

Hi, i have used your script

JS Code

<script type="text/javascript">
$(document).ready(function()
{
   $('a[rel="modal"]:first').qtip(
   {
      content: {
         title: {
            text: 'Modal qTip',
            button: 'Chiudi'
         },
         text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! ' +
               'Much like the <a href="http://onehackoranother.com/projects/jquery/boxy/">Boxy</a> plugin, ' +
               'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
      },
      position: {
         target: $(document.body), // Position it via the document body...
         corner: 'center' // ...at the center of the viewport
      },
      show: {
         when: 'mouseover', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 350 },
         padding: '14px',
         border: {
            width: 9,
            radius: 9,
            color: '#666666'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {
            // Fade in the modal "blanket" using the defined show speed
            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {
            // Fade out the modal "blanket" using the defined hide speed
            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   });
 
   // Create the modal backdrop on document load so all modal tooltips can use it
   $('<div id="qtip-blanket">')
      .css({
         position: 'absolute',
         top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
         left: 0,
         height: '200%', // Span the full document height...
         width: '100%', // ...and full width
 
         opacity: 0.7, // Make it slightly transparent
         backgroundColor: 'black',
         zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
      })
      .appendTo(document.body) // Append to the document body
      .hide(); // Hide it initially
});
</script>

But this script work only for one modal tooltip... for make more modals tooltips in my page, with different contents how do? Sorry for my bad english.. i'm italian. Thanks.

[Craig]

dannythegreat, you can do this by setting un an initial settings object and supplying different content on a tip to tip basis like so:

JS Code

$(document).ready(function()
{
   // Setup a content array
   var contents = [
      'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>!',
      $('#tooltipContent')
   ];
 
   // Create a common qTip configuration
   var config = {
      content: {
         title: {
            text: 'Modal qTip',
            button: 'Chiudi'
         }
      },
      position: {
         target: $(document.body), // Position it via the document body...
         corner: 'center' // ...at the center of the viewport
      },
      show: {
         when: 'mouseover', // Show it on click
         solo: true // And hide all other tooltips
      },
      hide: false,
      style: {
         width: { max: 350 },
         padding: '14px',
         border: {
            width: 9,
            radius: 9,
            color: '#666666'
         },
         name: 'light'
      },
      api: {
         beforeShow: function()
         {
            // Fade in the modal "blanket" using the defined show speed
            $('#qtip-blanket').fadeIn(this.options.show.effect.length);
         },
         beforeHide: function()
         {
            // Fade out the modal "blanket" using the defined hide speed
            $('#qtip-blanket').fadeOut(this.options.hide.effect.length);
         }
      }
   };
 
   $('a[rel="modal"]').each(function(i) // Notice the i variable
   {
      // Create a new 'config' object and add the right content from our content array
      var options = $.extend(true, {}, config, { content: contents[i] });
 
      // Create the tooltip
      $(this).qtip(options);
   })
 
   // Create the modal backdrop on document load so all modal tooltips can use it
   $('<div id="qtip-blanket">')
      .css({
         position: 'absolute',
         top: $(document).scrollTop(), // Use document scrollTop so it's on-screen even if the window is scrolled
         left: 0,
         height: '200%', // Span the full document height...
         width: '100%', // ...and full width
 
         opacity: 0.7, // Make it slightly transparent
         backgroundColor: 'black',
         zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
      })
      .appendTo(document.body) // Append to the document body
      .hide(); // Hide it initially
});

[dannythegreat]

Thank for your reply, i have two questions..
1- How i do to insert pngfix "$(document).pngFix();" if already exist "$(document).ready(function()" in your code?
2- How i do to insert image <img src="myimage"/> into tooltip title?

Thanks.

[Craig]

You can simply add the "$(document).pngFix();" statement before the contents array:

JS Code

$(document).ready(function(){
   $(document).pngFix();
 
   var contentes= [];
   ...

And you can use a simple HTML string for the title button:

JS Code

var config = {
      content: {
         title: {
            text: 'Modal qTip',
            button: '<img src="img/chiudi.png" alt="Chiudi" />'
         }
      }

[dannythegreat]

Yes, for png fix I had tried so, but don't work.
For image in tooltip, no in modaltoptip but insert image into tooltip, how i do?

[Craig]

Hmm if you want the PNG fix applied to the tooltip also you'll have to stick the method in the onRender callback also:

JS Code

var config = {
   ...
   api: {
      onRender: function(){ $(document).pngFix(); }
   }
}

Can't make out what you're trying to ask in your second sentence, could you elaborate?

[FDisk]

dannythegreat Wrote:Yes, for png fix I had tried so, but don't work.
For image in tooltip, no in modaltoptip but insert image into tooltip, how i do?

If you want to insert image as the close button for tooltip without title

JS Code

var config = {
      content: {
         title: {
            text: '',
            button: '<img src="img/chiudi.png" alt="Chiudi" />'
         }
      }

If you want just the image in the title

JS Code

var config = {
      content: {
         title: {
            text: '<img src="img/chiudi.png" alt="Chiudi" />'
         }
      }

[Spoonless Eddie]

Man, I cannot BELIEVE how easy this was. This is exactly what I've been looking for. I didn't know I could do this.

" button: '<img src="(path)" title="Close on click" />' "

This makes my day.