c++ hover button with two tooltips

In this c++ hover button with two tooltips tutorial we create a c++ button control with two tooltips one on the left half and the other on the right side

The tooltips text on the leftis different from one on the right and change in the event of mouse move in the mouse rectangle



To Get the project along the exe click here note that exe is in the debug folder


With the help of codeproject I made this application


To Create the application

1- Start new MFC appWizard( Exe) Dialog based application and give it a name like Tache or any other weird name you want !!?

2- In The Resource editor add the follow images for hover animation

and name them as follows IDB_NORMAL ,IDB_OVER and IDB_DOWE respectively ( the ids of the bitmaps

3-Insert new class in the insert menu or from class view and name it CoolButton
4- Add the following data members to the newly created class ( public)
CBitmap m_bm_Normal ,m_bmp_over ,m_bmp_pushed ;
// three bitmaps and status enumerators
enum Buttom_status { NORMAL ,Hoverimage ,CLICKED} ;
Buttom_status m_previous_state ,m_current_status ;
5- Add new constructor in the new class and edit it as follows

CoolButton::CoolButton(int regular, int hover, int clicjed)
{


m_current_status = NORMAL ;

m_bm_Normal.LoadBitmap(regular) ,
m_bmp_over.LoadBitmap(hover) ,
m_bmp_pushed.LoadBitmap(clicjed) ;
// associate each variable ( Cbitmap with a bitmap )
}

6- Add the following windows messege handlers and virtual functions

Onleftmousedown , onleftmouseup , onmouse_move and Drawitem and edit them as follows

void CoolButton::OnLButtonDown(UINT nFlags, CPoint point)
{


m_previous_state = m_current_status ;
m_current_status = CLICKED ;
// now the button is clicked
SetCapture();

CButton::OnLButtonDown(nFlags, point);
}

and
void CoolButton::OnLButtonUp(UINT nFlags, CPoint point)
{

CRect totals_Rect ;

GetClientRect(totals_Rect) ;


if(On_Recto(totals_Rect ,point))
{

m_previous_state = m_current_status ;
m_current_status = Hoverimage ;
ReleaseCapture();

// if you release the left button while you are inside the button boundaries
}
else {
m_previous_state = m_current_status ;
m_current_status = NORMAL ;
ReleaseCapture();


}





CButton::OnLButtonUp(nFlags, point);
}

void CoolButton::OnMouseMove(UINT nFlags, CPoint point)
{



CRect mybutton_rect ;
GetClientRect(mybutton_rect) ;

if( m_previous_state == CLICKED && (On_Recto(mybutton_rect ,point)))

{

m_previous_state = m_current_status ;
m_current_status = CLICKED ;


}

else if(On_Recto(mybutton_rect ,point))


{

m_previous_state = m_current_status ;
m_current_status = Hoverimage ;
Invalidate(FALSE) ;

}

else
{
m_previous_state = m_current_status ;
m_current_status = NORMAL ;
Invalidate(FALSE) ;
}



TRACKMOUSEEVENT TME_STRUCT ;
TME_STRUCT.cbSize = sizeof(TRACKMOUSEEVENT) ;
TME_STRUCT.dwFlags = TME_LEAVE ;
TME_STRUCT.hwndTrack =m_hWnd ;
_TrackMouseEvent(&TME_STRUCT) ;






CButton::OnMouseMove(nFlags, point);
}

To draw the button
void CoolButton::DrawItem(LPDRAWITEMSTRUCT l_DrawItem_Struct)
{

CDC *pDC_Own = CDC::FromHandle(l_DrawItem_Struct->hDC) ;
CBitmap *pOldBitmap ;
CDC memi_DC
; memi_DC.CreateCompatibleDC (pDC_Own) ;


switch(m_current_status)
{
case NORMAL :
pOldBitmap = memi_DC.SelectObject( &m_bm_Normal ) ;
break ;
case Hoverimage :


pOldBitmap = memi_DC.SelectObject(& m_bmp_over ) ;
break ;


case CLICKED :

pOldBitmap = memi_DC.SelectObject( &m_bmp_pushed ) ;
break ;


}

pDC_Own->BitBlt(0,0, l_DrawItem_Struct->rcItem.right -l_DrawItem_Struct->rcItem.left ,l_DrawItem_Struct->rcItem.bottom- l_DrawItem_Struct->rcItem.top ,&memi_DC ,0,0,SRCCOPY);

memi_DC.SelectObject(pOldBitmap) ;

memi_DC.DeleteDC() ;



}
7- Add the following functioon to Coolbutton class name it On_Recto of type BOOL edit as follows
BOOL CoolButton::On_Recto(CRect &rct, CPoint cpt)
{

return(cpt.x> 0 && cpt.x< (rct.right -rct.left) && cpt.y>0 && cpt.y< (rct.bottom -rct.top) )?TRUE :FALSE ;

to check whether the mouse inside the botton rect
}

8- Add the following virtual function to the new class of type void
void CoolButton::OnMouseLeave()
{

m_previous_state = m_current_status ;
m_current_status = NORMAL ;

Invalidate() ;


}
and add ON_MESSAGE(WM_MOUSELEAVE,OnMouseLeave) inside begin messege map

Now we are finished from CoolButton Class

9- In the dialog resource editor set Ok button properties as owner_draw
10 Open the class wizard and add a member variable chose IDOK in the dialog class and let us name it m_double_tooltip_button or something else and do not forget to put
#include "CoolButton.h" in your dialog class header file

11- Replace the old constructor in the dialgo class with the following one
CTasheDlg::CTasheDlg(): CDialog(IDD_TASHE_DIALOG,NULL), m_double_tooltips_button(IDB_NORMAL ,IDB_OVER ,IDB_DOWE)
{
//loading the bitmaps
}

12- Add the CToolTipCtrl variable in the dialog class and name it like m_mytooltip or else

add the following code to OnItDialog
SetWindowText("helo");
UpdateData(FALSE);
m_double_tooltips_button.MoveWindow( 60,60,240,140) ;
// buton new position
CRect button_rectangle ;
m_double_tooltips_button.GetClientRect(button_rectangle) ;



m_mytooltip.Create( this);

CRect leftRect = button_rectangle ;
CRect Right_button = button_rectangle ;

leftRect.right = Right_button.left = button_rectangle.right/2 ;
m_mytooltip.AddTool(&m_double_tooltips_button, " Right half ", &Right_button ,1) ;
m_mytooltip.AddTool(&m_double_tooltips_button, " you are on the left part of the custom control botton",&leftRect ,2) ;
// or you can replace last addtool with updateTooltip function

13 - In your dialog class add the PreTranslateMessage messege handler as follows

BOOL CTasheDlg::PreTranslateMessage(MSG* pMsg)
{

if(m_mytooltip.m_hWnd) m_mytooltip.RelayEvent(pMsg) ;


return CDialog::PreTranslateMessage(pMsg);
}


14- Build application compile it and move the mouse cursor inside the botton and see the effect of that


I hope that you liked this tutorial ( tache) for more tutorials see the blog for more

My next project would be A button with 2 functions

Thanks for reading the tache program ....